| | |
|---|
| | | 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,/; |
|---|
| | | /^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] = ""; |
|---|
| | | } |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | 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); |
|---|
| | | // 创建一个PizZip实例，内容为模板的内容 |
|---|
| | | let zip = new PizZip(content); |
|---|
| | | // 创建并加载docx templater实例对象 |
|---|
| | | let doc = new docxtemplater().loadZip(zip); |
|---|
| | | // 设置模板变量的值 |
|---|
| | | doc.setData(e); |
|---|
| | | console.log(doc.setData(e), '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); |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | console.log(doc, 'out~doc') |
|---|
| | | // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示） |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" |
|---|
| | | }); |
|---|
| | | console.log(doc.getZip().generate, 'doc.getZip().generate') |
|---|
| | | // 将目标文件对象保存为目标类型的文件，并命名 |
|---|
| | | saveAs(out, docxname); |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //下载word，带图片 |
|---|
| | | export const exportDocWidthImg = (e, path , dname, imgSize) => { |
|---|
| | | export const exportDocWidthImg = (e, path, dname, imgSize) => { |
|---|
| | | for (let attr in e) { |
|---|
| | | if (e[attr] == null) { |
|---|
| | | e[attr] = ""; |
|---|
| | |
|---|
| | | // // 图片处理 |
|---|
| | | const opts = {} |
|---|
| | | opts.fileType = "docx"; |
|---|
| | | opts.getImage = (chartId) =>{ |
|---|
| | | opts.getImage = (chartId) => { |
|---|
| | | return base64DataURLToArrayBuffer(chartId); |
|---|
| | | } |
|---|
| | | |
|---|
| | | opts.getSize = function(img, tagVlaue, tagName){ //图片size |
|---|
| | | if(imgSize.hasOwnProperty(tagName)) { |
|---|
| | | opts.getSize = function (img, tagVlaue, tagName) { //图片size |
|---|
| | | if (imgSize.hasOwnProperty(tagName)) { |
|---|
| | | return imgSize[tagName] |
|---|
| | | }else { |
|---|
| | | return [100,100] |
|---|
| | | } else { |
|---|
| | | return [100, 100] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let imageModule = new ImageModule(opts); |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | //预览word，不带图片的 |
|---|
| | | export const viewD = (e, path , continer) => { |
|---|
| | | for (let attr in e) { |
|---|
| | | if (e[attr] == null) { |
|---|
| | | e[attr] = ""; |
|---|
| | | } |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | 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); |
|---|
| | | // 创建一个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; |
|---|
| | | } |
|---|
| | | 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); // 渲染到页面预览 |
|---|
| | | // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示） |
|---|
| | | let out = doc.getZip().generate({ |
|---|
| | | type: "blob", |
|---|
| | | mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" |
|---|
| | | }); |
|---|
| | | console.log(out, 'out') |
|---|
| | | // window.android.toDownLoadWord(out) |
|---|
| | | docx.renderAsync(out, continer); // 渲染到页面预览 |
|---|
| | | }); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | //预览带图片的word |
|---|
| | | export const viewWithImg = (e, path , continer, imgSize) => { |
|---|
| | | for (let attr in e) { |
|---|
| | | if (e[attr] == null) { |
|---|
| | | e[attr] = ""; |
|---|
| | | } |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | 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.fileType = "docx"; |
|---|
| | | opts.getImage = (chartId) =>{ |
|---|
| | | return base64DataURLToArrayBuffer(chartId); |
|---|
| | | } |
|---|
| | | const doc = new docxtemplater(); |
|---|
| | | // // 创建一个PizZip实例，内容为模板的内容 |
|---|
| | | const zip = new PizZip(content); |
|---|
| | | doc.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 [100,100] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | let imageModule = new ImageModule(opts); |
|---|
| | | doc.attachModule(imageModule); |
|---|
| | | doc.setData(e); |
|---|
| | | 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 |
|---|
| | | }; |
|---|
| | | console.log(JSON.stringify({error: e})); |
|---|
| | | // throw error; |
|---|
| | | } |
|---|
| | | 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); // 渲染到页面预览 |
|---|
| | | // 生成一个代表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; |
|---|
| | | 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; //调用回调函数 |
|---|
| | | } |
|---|
| | | 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, ""); |
|---|
| | | 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 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; |
|---|
| | | // 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; |
|---|
| | | } |
|---|
