Vue+elementUI導(dǎo)出word打印方式
更新時間:2025年04月09日 16:30:53 作者:沉默是金~
這篇文章主要介紹了Vue+elementUI導(dǎo)出word打印方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue+elementUI導(dǎo)出word打印
import JSZipUtils from "jszip-utils"; import JSZip from "pizzip"; import Docxtemplater from "docxtemplater";
npm安裝以上依賴
首先維護個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)建一個JSZip實例,內(nèi)容為模板的內(nèi)容
const zip = new JSZip(content)
// 創(chuàng)建并加載docxtemplater實例對象
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
}
// 生成一個代表docxtemplater對象的zip文件(不是一個真實的文件,而是在內(nèi)存中的表示)
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
})
// 將目標文件對象保存為目標類型的文件,并命名
saveAs(out, '汕頭公司'+printData.startTime.toString().split('-')[0] + '年職工(青年)創(chuàng)新創(chuàng)效立項申報表.docx')
})
},總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機制獲取用戶的基本信息,進而實現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下2021-09-09
如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

