前端Vue.js實現json數據導出到doc

更新時間：2022年09月15日 09:53:56 作者：baldwin???????

這篇文章主要介紹了前端Vue.js實現json數據導出到doc，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

組件選擇

因為導出word需要保留一定的格式，所以這里選擇docxtemplater，利用定制導出模板的方式限制數據的導出格式。

實現一個最簡單的導出

安裝（后續(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",
});

單條數據導出到word

配置導出模板，并上傳CDN，模板格式如下：

導出的數據結構：

{
    "title": "第一篇",
    "gradeId": "三年級上",
    "genreDesc": "議論文",
    "subjectMatterInfo": "敘事",
    "content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍",
    "remark": "點評1"
}

導出wrod截圖

具體實現：

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');
    });
};

批量數據導出到wrod

配置導出模板，并上傳CDN，模板格式如下：

#articles為循環(huán)開始，/為循環(huán)結束，中間是循環(huán)體

導出的數據結構：

{
    "articles": [
        {
            "title": "第一篇",
            "gradeId": "三年級上",
            "genreDesc": "議論文",
            "subjectMatterInfo": "敘事",
            "content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍",
            "remark": "點評1"
        },
        {
            "title": "第二篇",
            "gradeId": "三年級下",
            "genreDesc": "記敘文",
            "subjectMatterInfo": "寫人",
            "content": "\t一個晴朗的星期天，爸爸和媽媽帶我到北海公園去玩兒媽帶我到北海公園去玩兒。那天秋高氣爽，太陽在藍。\n問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。",
            "remark": "點評2"
        }
    ]
}

導出wrod截圖：

具體實現：

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實現json數據導出到doc的文章就介紹到這了,更多相關Vue.js json數據導出doc內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: