參考：https://www.codetd.com/article/15219743
- 安裝
// 安裝 docxtemplater
npm install docxtemplater pizzip --save
// 安裝 jszip-utils
npm install jszip-utils --save
// 安裝 jszip
npm install jszip --save
// 安裝 FileSaver
npm install file-saver --save
// 引入處理圖片的插件1
npm install docxtemplater-image-module-free --save
// 引入處理圖片的插件2
npm install angular-expressions --save
- 關鍵代碼JS部分
/**
* 導出word文檔（帶圖片） doc.js
*
*/
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
/**
* 將base64格式的數據轉為ArrayBuffer
* @param {Object} dataURL base64格式的數據
*/
function base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
if (!base64Regex.test(dataURL)) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
let binaryString;
if (typeof window !== "undefined") {
binaryString = window.atob(stringBase64);
} else {
binaryString = Buffer.from(stringBase64, "base64").toString("binary");
}
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
const ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes.buffer;
}
export const ExportBriefDataDocx = (tempDocxPath, data, fileName, imgSize) => {
console.log(111, tempDocxPath, data, fileName, imgSize)
//這里要引入處理圖片的插件
var ImageModule = require('docxtemplater-image-module-free');
var expressions = require('angular-expressions')
var assign = require('lodash/assign')
var last = require("lodash/last")
expressions.filters.lower = function (input) {
// This condition should be used to make sure that if your input is
// undefined, your output will be undefined as well and will not
// throw an error
if (!input) return input
// toLowerCase() 方法用于把字符串轉換為小寫。
return input.toLowerCase()
}
function angularParser(tag) {
tag = tag
.replace(/^\.$/, 'this')
.replace(/(’|‘)/g, "'")
.replace(/(“|”)/g, '"')
const expr = expressions.compile(tag)
return {
get: function (scope, context) {
let obj = {}
const index = last(context.scopePathItem)
const scopeList = context.scopeList
const num = context.num
for (let i = 0, len = num + 1; i < len; i++) {
obj = assign(obj, scopeList[i])
}
//word模板中使用 $index+1 創(chuàng)建遞增序號
obj = assign(obj, { $index: index })
return expr(scope, obj)
}
}
}
JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
if (error) {
console.log(error)
}
expressions.filters.size = function (input, width, height) {
return {
data: input,
size: [width, height],
};
};
let opts = {}
opts = {
//圖像是否居中
centered: true
};
opts.getImage = (chartId) => {
//將base64的數據轉為ArrayBuffer
return base64DataURLToArrayBuffer(chartId);
}
opts.getSize = function (img, tagValue, tagName) {
//自定義指定圖像大小
if (imgSize.hasOwnProperty(tagName)) {
return imgSize[tagName];
} else {
return [200, 200];
}
}
// 創(chuàng)建一個JSZip實例，內容為模板的內容
const zip = new PizZip(content)
// 創(chuàng)建并加載 Docxtemplater 實例對象
// 設置模板變量的值
let doc = new Docxtemplater();
doc.attachModule(new ImageModule(opts));
doc.loadZip(zip);
doc.setOptions({parser:angularParser});
doc.setData(data)
try {
// 呈現文檔，會將內部所有變量替換成值，
doc.render()
} catch (error) {
const e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
}
console.log('err',{ error: e })
// 當使用json記錄時，此處拋出錯誤信息
throw error
}
// 生成一個代表Docxtemplater對象的zip文件（不是一個真實的文件，而是在內存中的表示）
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
// 將目標文件對象保存為目標類型的文件，并命名
saveAs(out, fileName)
})
}
/**
1. 將圖片的url路徑轉為base64路徑
2. 可以用await等待Promise的異步返回
3. @param {Object} imgUrl 圖片路徑
*/
export function getBase64Sync(imgUrl) {
return new Promise(function (resolve, reject) {
// 一定要設置為let，不然圖片不顯示
let image = new Image();
//圖片地址
image.src = imgUrl;
// 解決跨域問題
image.setAttribute("crossOrigin", '*'); // 支持跨域圖片
// image.onload為異步加載
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
//圖片后綴名
let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
//圖片質量
let quality = 0.8;
//轉成base64
let dataurl = canvas.toDataURL("image/" + ext, quality);
//返回
resolve(dataurl);
};
})
}
- 導出函數
vue 中引入上述js文件和方法
import {ExportBriefDataDocx,getBase64Sync} from './doc.js'
async ExportBriefDataDocx(){
//圖片轉base64
let imgurl= await getBase64Sync('圖片路徑')
let imgurl2= await getBase64Sync('圖片路徑')
let data= {
name:this.name,
imgurl:this.imgurl,
imgurl2:this.imgurl2
}
let imgSize = {
//控制導出的word圖片大小，可自定義
imgurl:[200, 200],
imgurl2:[200, 200],
};
exportWord("/我的模板.docx", data, `${this.listname}.docx`, imgSize);
//docx模板放在public文件夾下，如果是vue2放在static下
// ExportBriefDataDocx("/static/我的模板.docx", data, `${listname}.docx`, imgSize);
}
- 模板內容
自己準備一個docx文檔，然后里面標注好需替換的參數
列表循環(huán)-- {#list}{name}{/list}
單個參數–{}
圖片–{%imgUrl}
大概就這些，我也是從參考鏈接里看到的，至此基本能解決大部分問題，但是我還遇到了兩個問題，所以自己記錄補充一下 - 表格循環(huán)打印會多出空格
我想循環(huán)表格出來，但是輸入數據，出來后實際是這樣的
let data= {
ld:[{data1:1,data2:2},{data1:1,data2:2}],
}
ExportBriefDataDocx("/static/wd.docx", data, `${listname}.docx`, imgSize);
多出了很多空格，我想著去掉模板中的換行符，像這樣
我本來是想著這樣就能少一行，就是正常表格了，但是其實報錯了
message: ‘The filetype for this file could not be identified, is this file corrupted ?’, stack: ‘Error: The filetype for this file could not be ide…//./node_modules/jszip-utils/lib/index.js:110:25)’
大概就是類型不對，讀不出來什么的
后來靈光一閃，想到參考鏈接里各種數據都是在表格里的，應該沒問題，所以我就想著開始結束都放進去，就像這樣
然后結果就對了
7.保存圖片模糊問題 quality = 1也沒啥用文章來源：http://www.zghlxwxcb.cn/news/detail-609750.html
改成這樣,導出后的圖片能經得起縮放文章來源地址http://www.zghlxwxcb.cn/news/detail-609750.html
export function getBase64Sync(imgUrl,width,height) {
//傳入你想要的寬高，最好大一點，這個不會影響導出后的大小，這里的寬高可以理解為分辨率，就是canvas繪制的時候的大小，imgSize里的才是導出到文檔的大小
return new Promise(function (resolve, reject) {
// 一定要設置為let，不然圖片不顯示
let image = new Image();
//圖片地址
image.src = imgUrl;
// 解決跨域問題
image.setAttribute("crossOrigin", '*'); // 支持跨域圖片
// image.onload為異步加載
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = width*2;
canvas.height = height*2; //寬高放大兩倍
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
//圖片后綴名
let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
//圖片質量
//let quality = 1;
//轉成base64
let dataurl = canvas.toDataURL("image/"+ext);
//返回
resolve(dataurl);
};
})
}
到了這里，關于VUE使用docxtemplater導出word（帶圖片） 踩坑 表格循環(huán)空格 ，canvas.toDataURL圖片失真模糊問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
