前端js生成自定义内容的PDF及word文件的实现

1.生成pdf:

1.使用的插件：jspdf，jspdf-autotable，html2canvas

2.插件介绍：

2.1 jspdf：前端生成和导出pdf的插件；
2.2 jspdf-autotable：可以更方便的在jspdf中生成表格，可以直接传入表格数据也可以直接传入表格dom标签；jspdf本身也有生成表格的API，只是没有jspdf-autotable方便，可以根据需要选择；
2.3 html2canvas：可以截取网页中的dom元素为canvas对象，来构建屏幕截图,如果不需要此功能，可以不使用这个插件

3.jspdf API地址、jspdf-autotable样式配置参考这两个地址可以找到jspdf的大部分使用方法和配置介绍

4.demo

使用这个demo前需要注意：
1.需要自己生成simhei-normal.js/ts文件,生成方法查看上一篇文章；
如果导出内容不包含中文可以不需要这个导入，相应的注释掉下面的 doc.setFont(‘simhei’) 以及 font: ‘simhei’,
2.html2canvas中获取了相应的dom元素，需要改成自己的标签元素。


import { jsPDF } from 'jspdf'
import 'jspdf-autotable'
import './simhei-normal' //jspdf自定义字体，生成步骤参见上一篇博文
const html2canvas = window['html2canvas']export function exportPDF(filename: string) {const doc = new jsPDF() as any;doc.setFont('simhei');//simhei是自定义字体名//获取文件单页的宽高，单位mmvar pageWidth = Math.floor(doc.internal.pageSize.width || doc.internal.pageSize.getWidth());var pageHeight = Math.floor(doc.internal.pageSize.height || doc.internal.pageSize.getHeight());const logoData = new Image()logoData.src = '../../../../../public/images/product/logo.jpg'//添加图片，参数依次为：imageData(string|HTMLImageElement|HTMLCanvasElement|Uint8Array),x(水平位置),y(垂直位置),w(宽),h(高)//位置、宽、高的单位都为mmdoc.addImage(logoData, 10, 5, 21, 21)doc.setFontSize(38)//字体大小配置，在需要配置的文本上方设置。doc.setTextColor('red')//字体颜色配置//添加文本,参数为('文本内容',x,y)doc.text('this is a textContent', 35, 20)doc.setFontSize(15)doc.setTextColor('black')doc.text('this is a textContent too', 10, 35)doc.setLineWidth(0.5) //设置线条宽度doc.setDrawColor('red')//设置线条颜色//绘制线条(X1,Y1,X2,Y2)doc.line(5, 38, 205, 38)html2canvas(document.getElementById('chart-total'), {background: "#ffffff",dpi: 140}).then((canvas: HTMLCanvasElement) => {doc.addImage(canvas, 10, 55, pageWidth - 30, pageHeight - 90)//新增一页doc.addPage()const data = [  { time: '202103011000', address: '上海' }, { time: '202103011000', address: '上海' },{ time: '202103011000', address: '上海' }]const header = [{ header: '时间', dataKey: 'time' }, { header: '地址', dataKey: 'address' }]doc.autoTable({body: data,columns: header,//表格全局样式styles: {fillColor: [255, 255, 255],//背景色font: 'simhei', //字体，如果不配置，中文仍会乱码textColor: [0, 0, 0],//字体颜色halign: 'center', // 文字水平布局left, center, rightvalign: 'middle',//垂直布局},//表头样式配置headStyles: {fillColor: [220, 220, 220],lineColor: 200,lineWidth: 0.5,},//列的样式，key值对应header的dataKeycolumnStyles: {'time': { columnWidth: 35 },},theme: 'grid',      // 主题})const pageSize = doc.getNumberOfPages()doc.setLineWidth(0.3)doc.setFontSize(12)//设置页脚for (let page = 1; page <= pageSize; page++) {doc.setPage(page)doc.setDrawColor('#f16c6c')doc.line(25, pageHeight - 10, pageWidth - 25, pageHeight - 10)doc.text('制作：某某某   审合：某某某  签发：某某某   电话：XXXXXXXXXXX', 40, pageHeight - 5)}doc.save(`${filename}.pdf`);})}

2.生成word:

1.使用的插件：docxjs

docx的安装和API、不同功能的案例demo此demo几乎包括了所有API的使用和配置。

2.demo

import {Document,TextRun,Footer,TabStopType,AlignmentType,TabStopPosition,VerticalPositionRelativeFrom,VerticalPositionAlign,HorizontalPositionRelativeFrom,HorizontalPositionAlign,Media,Packer,Paragraph,
} from "docx";export function exportForecastWord(filename) {const doc = new Document();//页脚const footers = {default: new Footer({children: [new Paragraph({children: [new TextRun('电话：010-68400565'), new TextRun('\t传真：010-58991637 ')],//实现第一个text左对齐，第二个text右对齐tabStops: [{type: TabStopType.RIGHT,position: TabStopPosition.MAX,},],border: {top: { color: '000', value: 'dashed', size: 10, space: 5 }}})],}),}formUrlGetDataUrl('../public/images/logo.jpg', (dataUrl) => {const logoImge = Media.addImage(doc, dataUrl, 70, 70, {//设置float样式主要是为了让图片和其水平相邻的文字垂直居中，可以去掉对比效果floating: {zIndex: 5,horizontalPosition: {relative: HorizontalPositionRelativeFrom.COLUMN,align: HorizontalPositionAlign.LEFT,},verticalPosition: {relative: VerticalPositionRelativeFrom.PARAGRAPH,align: VerticalPositionAlign.CENTER,},},});   doc.addSection({children: [new Paragraph({children: [logoImge, new TextRun({text: "this is a wordTitle", bold: true,color: "red",size: 60})],alignment: AlignmentType.RIGHT,spacing: {before: 150,after: 150}}),],footers: footers});Packer.toBlob(doc).then(blob => {var a = document.createElement('a');a.href = URL.createObjectURL(blob);a.download = `${filename.replace(/\s/g, '')}.docx`setTimeout(function () {a.click();URL.revokeObjectURL(a.href);a = null}, 0);});})
}/*** 根据图片路径得到dataurl* @param url 图片路径* @param cb 回调函数*/
function formUrlGetDataUrl(url, cb) {var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");var img = new Image();img.src = url;img.onload = () => {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);cb(canvas.toDataURL())canvas=null};
}

使用这个demo时需要注意：文件中使用了一个图片相对路径，所以需要在对应路径下添加一个图片。
补充1：doxcjs生成表格时单元格文本的水平垂直居中实现：

function docxTable(tableData:any[]){let data = removeNullData([...tableData])const rows = data.map((row ,rowIndex)=> {return new TableRow({children: row.map((col)=>{return new TableCell({children: [new Paragraph({ children: [new TextRun({ text: String(col),size:20,bold:rowIndex===0?true:false })],alignment:AlignmentType.CENTER//文本水平居中})],verticalAlign: VerticalAlign.CENTER,margins: {//为文本上下设置相同的间距，实现垂直居中，默认文本和上下边界没有空白top: convertInchesToTwip(0.1),bottom: convertInchesToTwip(0.1),left: 0,right: 0,},})})})})return new Table({rows,width: {size: 100,type: WidthType.PERCENTAGE},});
}
const tableData=[['header1','header2'],['text1','text2']]

补充2：使用WPS打开生成的word文件部分格式不兼容问题解决：
1.包含表格时，如果设置width属性的type值为PERCENTAGE时，用WPS打开word文件，出现单元格width变窄的情况，
2.文本，border等设置的color未生效，显示都是黑色
解决：1. 可以不设置Table的width属性，如果需要固定表格的宽度可以设置Table或者TableCell的width属性的type值为WidthType.DXA

return new Table({rows,width: {size: 9000,type: WidthType.DXA},});

附上单位换算关系：参考：

2.color的值不要设置为red等单词而要使用16进制数值，且前面不要加#

new Paragraph({children: [logoImge, new TextRun({text: "天气预报",bold: true,color: "fa0202",size: 60,})],alignment: AlignmentType.RIGHT,spacing: {before: 150,after: 150}}),