Vue+elementUI導(dǎo)出word打印方式
Vue+elementUI導(dǎo)出word打印
import JSZipUtils from "jszip-utils"; import JSZip from "pizzip"; import Docxtemplater from "docxtemplater";
npm安裝以上依賴
首先維護(hù)個(gè)word模板

導(dǎo)出方法
//導(dǎo)出word
skipOutWord(row) {
var printData = row
const data = JSON.parse(JSON.stringify(printData))
data.timeYear = data.startTime.toString().split("-")[0]
data.startTime = data.startTime.toString().split("-")[0]+'年'+data.startTime.toString().split("-")[1]+'月'
data.endTime = data.endTime.toString().split("-")[0]+'年'+data.endTime.toString().split("-")[1]+'月'
//set打印日期
JSZipUtils.getBinaryContent('/template/projectApplication.docx', function (error, content) {
// 拋出異常
if (error) {
throw error
}
// 創(chuàng)建一個(gè)JSZip實(shí)例,內(nèi)容為模板的內(nèi)容
const zip = new JSZip(content)
// 創(chuàng)建并加載docxtemplater實(shí)例對(duì)象
const doc = new Docxtemplater().loadZip(zip)
// 設(shè)置模板變量的值
doc.setData({
...data,
})
try {
// 用模板變量的值替換所有模板變量
doc.render()
} catch (error) {
// 拋出異常
// let e = {
// message: error.message,
// name: error.name,
// stack: error.stack,
// properties: error.properties,
// }
this.$message.error('導(dǎo)出失敗')
throw error
}
// 生成一個(gè)代表docxtemplater對(duì)象的zip文件(不是一個(gè)真實(shí)的文件,而是在內(nèi)存中的表示)
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 將目標(biāo)文件對(duì)象保存為目標(biāo)類型的文件,并命名
saveAs(out, '汕頭公司'+printData.startTime.toString().split('-')[0] + '年職工(青年)創(chuàng)新創(chuàng)效立項(xiàng)申報(bào)表.docx')
})
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
- Vue升級(jí)帶來(lái)的elementui沖突警告:Invalid prop: custom validator check failed for prop “type“.的解決方案
- vue+elementui 實(shí)現(xiàn)上傳文件/導(dǎo)入文件的功能示例詳解
- Vue ElementUI中Upload組件批量上傳的實(shí)現(xiàn)代碼
- vue基于ElementUI動(dòng)態(tài)設(shè)置表格高度的3種方法
相關(guān)文章
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法(路由守衛(wèi))
這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法(路由守衛(wèi)),vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)(navigation-guards),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05
前端XSS攻擊場(chǎng)景詳解與Vue.js處理XSS的方法(vue-xss)
這篇文章主要給大家介紹了關(guān)于前端XSS攻擊場(chǎng)景與Vue.js使用vue-xss處理XSS的方法,介紹了實(shí)際工作中渲染數(shù)據(jù)時(shí)遇到XSS攻擊時(shí)的防范措施,以及解決方案,需要的朋友可以參考下2024-02-02
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
公共組件父子依賴調(diào)用及子校驗(yàn)父條件問題解決
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗(yàn)父組件條件的問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請(qǐng)求
這篇文章主要介紹了Vue3如何使用axios發(fā)起網(wǎng)絡(luò)請(qǐng)求,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁(yè)面上回顯上傳的圖片,后端通過接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
vue @input和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

