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', }) // 將目標(biāo)文件對象保存為目標(biāo)類型的文件,并命名 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-10Vue3項目中優(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