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);
|
// 设置模板变量的值
|
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 [300,300]
|
}
|
}
|
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"
|
});
|
// 将目标文件对象保存为目标类型的文件,并命名
|
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);
|
|
// // 图片处理
|
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;
|
}
|