vue導(dǎo)出word純前端的實現(xiàn)方式
vue導(dǎo)出word純前端實現(xiàn)
最近項目有個需求導(dǎo)出word,純前端實現(xiàn),查了查資料,用docxtemplater簡直不要太簡單。
直接把官網(wǎng)例子拿過來就可以了。!!!
首先,新建一個docx文件,把模板先寫好。
注意?。∪绻麛?shù)據(jù)結(jié)構(gòu)中存在數(shù)組。 用{#xxx}{/xxx} 包裹。
數(shù)據(jù)結(jié)構(gòu)示例:
wordData: { name: '導(dǎo)出word', nameList: [{ name: "張三", age: 16, hobby: ['吃飯', '睡覺', '打豆豆'] }, { name: "李四", age: 19, hobby: ['抽煙', '喝酒', '打麻將'] }, ] },
模板寫好之后放入項目中。
然后導(dǎo)入需要的包,
npm i docxtemplater pizzip file-saver --save
然后在需要的模塊內(nèi)引入
import 'docxtemplater/build/docxtemplater.js' import 'pizzip/dist/pizzip.js' import 'pizzip/dist/pizzip-utils.js' import 'file-saver'
methods: { // 導(dǎo)出word loadFile(url, callback) { PizZipUtils.getBinaryContent(url, callback); }, generate() { var that = this; this.loadFile("../../static/word.docx", function (error, content) { if (error) { throw error }; var zip = new PizZip(content); var doc = new window.docxtemplater().loadZip(zip) doc.setData({ ...that.wordData }); try { // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...) doc.render() } catch (error) { var e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties, } console.log(JSON.stringify({ error: e })); // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object). throw error; } var out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", }) //Output the document using Data-URI saveAs(out, "output.docx") }) }, }
到此就完事了。
完整代碼,安裝完包之后直接運行就好。記得放入word模板?。?!
<template> ? <div> ? ? <button @click="generate">導(dǎo)出</button> ? </div> </template>
<script> ? import 'docxtemplater/build/docxtemplater.js' ? import 'pizzip/dist/pizzip.js' ? import 'pizzip/dist/pizzip-utils.js' ? import 'file-saver' ? export default { ? ? data() { ? ? ? return { ? ? ? ? wordData: { ? ? ? ? ? name: '導(dǎo)出word', ? ? ? ? ? nameList: [{ ? ? ? ? ? ? ? name: "張三", ? ? ? ? ? ? ? age: 16, ? ? ? ? ? ? ? hobby: ['吃飯', '睡覺', '打豆豆'] ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? name: "李四", ? ? ? ? ? ? ? age: 19, ? ? ? ? ? ? ? hobby: ['抽煙', '喝酒', '打麻將'] ? ? ? ? ? ? }, ? ? ? ? ? ] ? ? ? ? }, ? ? ? } ? ? }, ? ? methods: { ? ? ? // 導(dǎo)出word ? ? ? loadFile(url, callback) { ? ? ? ? PizZipUtils.getBinaryContent(url, callback); ? ? ? }, ? ? ? generate() { ? ? ? ? var that = this; ? ? ? ? this.loadFile("../../static/word.docx", function (error, content) { ? ? ? ? ? if (error) { ? ? ? ? ? ? throw error ? ? ? ? ? }; ? ? ? ? ? var zip = new PizZip(content); ? ? ? ? ? var doc = new window.docxtemplater().loadZip(zip) ? ? ? ? ? doc.setData({ ? ? ? ? ? ? ...that.wordData ? ? ? ? ? }); ? ? ? ? ? try { ? ? ? ? ? ? // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...) ? ? ? ? ? ? doc.render() ? ? ? ? ? } catch (error) { ? ? ? ? ? ? var e = { ? ? ? ? ? ? ? message: error.message, ? ? ? ? ? ? ? name: error.name, ? ? ? ? ? ? ? stack: error.stack, ? ? ? ? ? ? ? properties: error.properties, ? ? ? ? ? ? } ? ? ? ? ? ? console.log(JSON.stringify({ ? ? ? ? ? ? ? error: e ? ? ? ? ? ? })); ? ? ? ? ? ? // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object). ? ? ? ? ? ? throw error; ? ? ? ? ? } ? ? ? ? ? var out = doc.getZip().generate({ ? ? ? ? ? ? type: "blob", ? ? ? ? ? ? mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", ? ? ? ? ? }) //Output the document using Data-URI ? ? ? ? ? saveAs(out, "output.docx") ? ? ? ? }) ? ? ? }, ? ? } ? } </script> <style scoped> </style>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)
這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05vue中根據(jù)時間戳判斷對應(yīng)的時間(今天 昨天 前天)
這篇文章主要介紹了vue中 根據(jù)時間戳 判斷對應(yīng)的時間(今天 昨天 前天),需要的朋友可以參考下2019-12-12