Vue+elementUI導(dǎo)出word打印方式
更新時(shí)間:2025年04月09日 16:30:53 作者:沉默是金~
這篇文章主要介紹了Vue+elementUI導(dǎo)出word打印方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
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í)帶來的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)文章
Django+Vue.js實(shí)現(xiàn)搜索功能
本文主要介紹了Django+Vue.js實(shí)現(xiàn)搜索功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的方法
用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實(shí)現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中優(yōu)雅實(shí)現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下2021-09-09vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例
這篇文章主要給大家介紹了關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)的相關(guān)資料,說到錨點(diǎn)定位,很多人第一時(shí)間會(huì)想到 a標(biāo)簽,但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美,需要的朋友可以參考下2023-07-07如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10