vue導(dǎo)出word純前端的實(shí)現(xiàn)方式
vue導(dǎo)出word純前端實(shí)現(xiàn)
最近項(xiàng)目有個(gè)需求導(dǎo)出word,純前端實(shí)現(xiàn),查了查資料,用docxtemplater簡(jiǎn)直不要太簡(jiǎn)單。
直接把官網(wǎng)例子拿過來就可以了。!??!
首先,新建一個(gè)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: ['抽煙', '喝酒', '打麻將'] }, ] },
模板寫好之后放入項(xiàng)目中。
然后導(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") }) }, }
到此就完事了。
完整代碼,安裝完包之后直接運(yùn)行就好。記得放入word模板?。。?/p>
<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>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ)
這篇文章主要介紹了vue中如何實(shí)時(shí)監(jiān)聽本地存儲(chǔ),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04深入淺析golang zap 日志庫(kù)使用(含文件切割、分級(jí)別存儲(chǔ)和全局使用等)
這篇文章主要介紹了golang zap 日志庫(kù)使用(含文件切割、分級(jí)別存儲(chǔ)和全局使用等),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn)
在登錄頁面需要啟動(dòng)向右滑塊驗(yàn)證功能,遇到這樣的需求怎么實(shí)現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn),感興趣的朋友一起看看吧2024-06-06vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05淺談Vue頁面級(jí)緩存解決方案feb-alive (下)
這篇文章主要介紹了淺談Vue頁面級(jí)緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間(今天 昨天 前天)
這篇文章主要介紹了vue中 根據(jù)時(shí)間戳 判斷對(duì)應(yīng)的時(shí)間(今天 昨天 前天),需要的朋友可以參考下2019-12-12