前端Vue.js實現(xiàn)json數(shù)據(jù)導出到doc
更新時間：2022年09月15日 09:53:56 作者：baldwin???????
這篇文章主要介紹了前端Vue.js實現(xiàn)json數(shù)據(jù)導出到doc，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
前言：
先說下需求：如何批量導出表格中勾選的數(shù)據(jù)，導出格式為word，并具有一定的格式！
開發(fā)環(huán)境：vue3、node v14.15.0
組件選擇
因為導出word需要保留一定的格式，所以這里選擇docxtemplater，利用定制導出模板的方式限制數(shù)據(jù)的導出格式。
實現(xiàn)一個最簡單的導出
安裝（后續(xù)的demo依賴相同）
yarn add docxtemplater pizzip file-saver
用法：
onst PizZip = require("pizzip");
const Docxtemplater = require("docxtemplater");
const fs = require("fs");
const path = require("path");
// Load the docx file as binary content
const content = fs.readFileSync(
path.resolve(__dirname, "input.docx"),
"binary"
);
const zip = new PizZip(content);
const doc = new Docxtemplater(zip, {
paragraphLoop: true,
linebreaks: true,
});
// Render the document (Replace {first_name} by John, {last_name} by Doe, ...)
doc.render({
first_name: "John",
last_name: "Doe",
phone: "0652455478",
description: "New Website",
});
const buf = doc.getZip().generate({
type: "nodebuffer",
// compression: DEFLATE adds a compression step.
// For a 50MB output document, expect 500ms additional CPU time
compression: "DEFLATE",
});單條數(shù)據(jù)導出到word
配置導出模板，并上傳CDN，模板格式如下：
導出的數(shù)據(jù)結構：
{
"title": "第一篇",
"gradeId": "三年級上",
"genreDesc": "議論文",
"subjectMatterInfo": "敘事",
"content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍",
"remark": "點評1"
}導出wrod截圖
具體實現(xiàn)：
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import PizZipUtils from 'pizzip/utils/index.js';
import {saveAs} from 'file-saver';
function loadFile(url, callback) {
PizZipUtils.getBinaryContent(url, callback);
}
export const renderDoc = data => {
loadFile('你上傳導出模板的CDN鏈接.docx', (error, content) => {
if (error) {
throw error;
}
const zip = new PizZip(content);
const doc = new Docxtemplater(zip, {linebreaks: true});
doc.setData(data);
try {
// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
doc.render();
}
catch (error) {
// The error thrown here contains additional information when logged with JSON.stringify (it contains a properties object containing all suberrors).
function replaceErrors(key, value) {
if (value instanceof Error) {
return Object.getOwnPropertyNames(value).reduce((error, key) => {
error[key] = value[key];
return error;
}, {});
}
return value;
}
console.log(JSON.stringify({error}, replaceErrors));
if (error.properties && error.properties.errors instanceof Array) {
const errorMessages = error.properties.errors
.map(error => error.properties.explanation)
.join('\n');
console.log('errorMessages', errorMessages);
// errorMessages is a humanly readable message looking like this :
// 'The tag beginning with "foobar" is unopened'
}
throw error;
}
const out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
// Output the document using Data-URI
saveAs(out, '導出word.docx');
});
};批量數(shù)據(jù)導出到wrod
配置導出模板，并上傳CDN，模板格式如下：
#articles為循環(huán)開始，/為循環(huán)結束，中間是循環(huán)體
導出的數(shù)據(jù)結構：
{
"articles": [
{
"title": "第一篇",
"gradeId": "三年級上",
"genreDesc": "議論文",
"subjectMatterInfo": "敘事",
"content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍",
"remark": "點評1"
},
{
"title": "第二篇",
"gradeId": "三年級下",
"genreDesc": "記敘文",
"subjectMatterInfo": "寫人",
"content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍。\n問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。",
"remark": "點評2"
}
]
}導出wrod截圖：
具體實現(xiàn)：
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import PizZipUtils from 'pizzip/utils/index.js';
import {saveAs} from 'file-saver';
function loadFile(url, callback) {
PizZipUtils.getBinaryContent(url, callback);
}
export const renderDoc = data => {
loadFile('你上傳導出模板的CDN鏈接.docx', (error, content) => {
if (error) {
throw error;
}
const zip = new PizZip(content);
// paragraphLoop段落循環(huán)
const doc = new Docxtemplater(zip, {paragraphLoop: true, linebreaks: true});
doc.setData(data);
try {
// render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
doc.render();
}
catch (error) {
// The error thrown here contains additional information when logged with JSON.stringify (it contains a properties object containing all suberrors).
function replaceErrors(key, value) {
if (value instanceof Error) {
return Object.getOwnPropertyNames(value).reduce((error, key) => {
error[key] = value[key];
return error;
}, {});
}
return value;
}
console.log(JSON.stringify({error}, replaceErrors));
if (error.properties && error.properties.errors instanceof Array) {
const errorMessages = error.properties.errors
.map(error => error.properties.explanation)
.join('\n');
console.log('errorMessages', errorMessages);
// errorMessages is a humanly readable message looking like this :
// 'The tag beginning with "foobar" is unopened'
}
throw error;
}
const out = doc.getZip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
// Output the document using Data-URI
saveAs(out, '導出word.docx');
});
};到此這篇關于前端Vue.js實現(xiàn)json數(shù)據(jù)導出到doc的文章就介紹到這了,更多相關Vue.js json數(shù)據(jù)導出doc內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 本地環(huán)境跨域請求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請求proxyTable的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
element-ui中el-form-item內的el-select該如何自適應寬度
自從用了element-ui,確實好用,該有的組件都有,但是組件間的樣式都固定好了,下面這篇文章主要給大家介紹了關于element-ui中el-form-item內的el-select該如何自適應寬度的相關資料,需要的朋友可以參考下2022-11-11
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結
then?方法是?Promise?中?處理的是異步調用，異步調用是非阻塞式的，在調用的時候并不知道它什么時候結束，也就不會等到他返回一個有效數(shù)據(jù)之后再進行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結,需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了Vue?數(shù)據(jù)綁定事件綁定樣式綁定語法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue?3.0?vue.config.js文件常用配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue.js 中 ref 和 reactive 的區(qū)別及用法解析
在Vue.js中,ref主要用于創(chuàng)建響應式的引用,通過.value屬性來訪問和修改值,特別適用于需要頻繁更改整個值的場景,而reactive則用于創(chuàng)建深度響應的對象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了詳解IOS微信上Vue單頁面應用JSSDK簽名失敗解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了vue項目實現(xiàn)github在線預覽功能，本文通過提問兩個問題帶領大家一起學習整個過程,需要的朋友可以參考下2018-06-06
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03