import docxtemplater from 'docxtemplater' import PizZip from 'pizzip' import JSZipUtils from 'jszip-utils' import {saveAs} from 'file-saver' let docx = require("docx-preview"); const ImageModule = require("docxtemplater-image-module-free"); const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/; //下载word,不带图片 export const exportDoc = (e, path , dname) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 let docxname = dname; //导出文件的名字 // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } // 创建一个PizZip实例,内容为模板的内容 let zip = new PizZip(content); // 创建并加载docx templater实例对象 let doc = new docxtemplater().loadZip(zip).setOptions({ linebreaks:true, paragraphLoop: true, nullGetter:function () { return "" } }); // 设置模板变量的值 doc.setData(e); try { //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; console.log(JSON.stringify({error: e})); throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); // 将目标文件对象保存为目标类型的文件,并命名 saveAs(out, docxname); }); }; //下载word,带图片 export const exportDocWidthImg = (e, path , dname, imgSize) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 let docxname = dname; //导出文件的名字 // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } // 创建一个PizZip实例,内容为模板的内容 let zip = new PizZip(content); // 创建并加载docx templater实例对象 let doc = new docxtemplater().loadZip(zip).setOptions({ linebreaks:true, paragraphLoop: true, nullGetter:function () { return "" } }); // // 图片处理 let opts = {} opts = { // 图像是否居中 centered: false }; opts.fileType = "docx"; opts.getImage = (chartId) =>{ return base64DataURLToArrayBuffer(chartId); } opts.getSize = function(img, tagVlaue, tagName){ //图片size if(imgSize.hasOwnProperty(tagName)) { return imgSize[tagName] }else { return [70, 30] } } let imageModule = new ImageModule(opts); doc.attachModule(imageModule); // 设置模板变量的值 doc.setData(e); try { //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; console.log(JSON.stringify({error: e})); throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); // 将目标文件对象保存为目标类型的文件,并命名 saveAs(out, docxname); },2000); } //下载word,带图片 export const exportDocWidthImg2 = (e, path , dname, arry, imgSize) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 let docxname = dname; //导出文件的名字 // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } // 创建一个PizZip实例,内容为模板的内容 let zip = new PizZip(content); // 创建并加载docx templater实例对象 let doc = new docxtemplater().loadZip(zip).setOptions({ linebreaks:true, paragraphLoop: true, nullGetter:function () { return "" } }); // // 图片处理 const opts = {} opts.fileType = "docx"; opts.getImage = (chartId) =>{ return base64DataURLToArrayBuffer(chartId); } opts.getSize = function(img, tagVlaue, tagName){ //图片size if(imgSize.hasOwnProperty(tagName)) { return imgSize[tagName] }else { return [300,300] } } let imageModule = new ImageModule(opts); doc.attachModule(imageModule); // 设置模板变量的值 doc.setData(e); try { //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; console.log(JSON.stringify({error: e})); throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); // 将目标文件对象保存为目标类型的文件,并命名 saveAs(out, docxname); },2000); } //预览word,不带图片的 export const viewD = (e, path , continer) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } // 创建一个PizZip实例,内容为模板的内容 let zip = new PizZip(content); // 创建并加载docx templater实例对象 let doc = new docxtemplater().loadZip(zip); // 设置模板变量的值 doc.setData(e); try { //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); docx.renderAsync(out, continer); // 渲染到页面预览 }); }; //预览带图片的word export const viewWithImg = (e, path , continer, imgSize) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } const doc = new docxtemplater(); // // 创建一个PizZip实例,内容为模板的内容 const zip = new PizZip(content); doc.loadZip(zip) // // 图片处理 const opts = {} //opts.centered = true; opts.fileType = "docx"; opts.getImage = (chartId) =>{ return base64DataURLToArrayBuffer(chartId); } opts.getSize = function(img, tagVlaue, tagName){ //图片size if(imgSize.hasOwnProperty(tagName)) { return imgSize[tagName] }else { return [70,40] } } let imageModule = new ImageModule(opts); doc.attachModule(imageModule); doc.setData(e); console.log(doc,'预览带图片====') try { // //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; console.log(JSON.stringify({error: e})); // throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); docx.renderAsync(out, continer); // 渲染到页面预览 }); }; //预览带签名和按手印的word export const viewWithImg2 = (e, path , continer, imgSize) => { for (let attr in e) { if (e[attr] == null) { e[attr] = ""; } } let docxsrc = path; //模板文件的位置 JSZipUtils.getBinaryContent(docxsrc, function (error, content) { // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据 // 抛出异常 if (error) { throw error; } const doc = new docxtemplater(); // // 创建一个PizZip实例,内容为模板的内容 const zip = new PizZip(content); doc.loadZip(zip) // // 图片处理 const opts = {} //opts.centered = true; opts.fileType = "docx"; opts.getImage = (chartId) =>{ return base64DataURLToArrayBuffer(chartId); } opts.getSize = function(img, tagVlaue, tagName){ //图片size if(imgSize.hasOwnProperty(tagName)) { return imgSize[tagName] }else { return [100,100] } } let imageModule = new ImageModule(opts); doc.attachModule(imageModule); doc.setData(e); try { // //替换所有模板变量 doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; // throw error; } // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示) let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }); docx.renderAsync(out, continer); // 渲染到页面预览 }); }; function base64DataURLToArrayBuffer(dataURL) { const base64Regex = /^data:image\/(png|jpg|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 = new Buffer(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 urlToBase64 = (url, callback) => { let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin', '*'); image.src = url image.onload = () => { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext('2d'); context.drawImage(image, 0, 0, image.width, image.height); var quality = 0.8; //这里的dataurl就是base64类型 var dataURL = canvas.toDataURL("image/png", quality); callback ? callback(dataURL) : null; //调用回调函数 } }; function base64Parser(dataURL) { if ( typeof dataURL !== "string" || !base64Regex.test(dataURL) ) { return false; } const stringBase64 = dataURL.replace(base64Regex, ""); // For nodejs if (typeof Buffer !== "undefined" && Buffer.from) { return Buffer.from(stringBase64, "base64"); } // For browsers : const binaryString = window.atob(stringBase64); 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; }