[{"insert":"1，引入jsPDF 以及 jsPDF-autoTable 库\n由于 jsPDF-autoTable依赖 jsPDF，所以得先加载jsPDF库，后加载 jsPDF-autoTable 库，在编辑器内，我们就预加载jsPDF\n地址："},{"attributes":{"color":"#0070c0"},"insert":"https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"},{"insert":"\n"},{"insert":{"image":"R10580997-5e8c565f3c12ad365540781b0fc5658f_12668_383_192.png"}},{"insert":"\n再页眉初始化加载jsPDF-autoTable 库\n地址："},{"attributes":{"color":"#0070c0"},"insert":"https://unpkg.com/jspdf-autotable@3.5.25/dist/jspdf.plugin.autotable.js"},{"insert":"\n"},{"insert":{"image":"R10580997-7e600170cee1e1d281bcac9eb43bdd1d_17193_1046_215.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-f43b44d308bacef2b3f84431652a0974_79393_649_370.png"}},{"insert":"\n\n晚上以上步骤，就已经可以导出表格为pdf了\n\n//表格列头\n var columns = ["},{"attributes":{"color":"#ff0000","bold":true},"insert":"\"你好\", \"大家\","},{"insert":" \"Country\"];\n //表格数据\n var rows = [\n [1, \"Shaw\", \"Tanzania\"],\n [2, \"Nelson\", \"Kazakhstan\"],\n [3, \"Garcia\", \"Madagascar\"]\n ];\n \n //只支持pt(不支持 mm 或 in)\n var doc = new jspdf.jsPDF('p', 'pt');\n doc.autoTable(columns, rows, {\n addPageContent: function(data) {\n doc.text(\"This is header\", 40, 30);\n }\n });\n doc.save('table.pdf');\n\n但是你会发现，如果表头或者单元格的值有中午，那么就会乱码，"},{"attributes":{"color":"#ff0000","bold":true},"insert":"\"你好\", \"大家\"，没有正常显示"},{"insert":"\n"},{"insert":{"image":"R10580997-110135d2f2b4c6040125eb55f41b6d4a_18504_1077_313.png"}},{"insert":"\n\n所以下一步继续\n2，解决中文乱码问题\n由于JSPDF没有支持中文，会导致中文乱码，所以我们需要给它自定义一个字体。\n\n首先，你需要下载一个ttf字体文件，如阿里巴巴普惠体\n\n"},{"insert":{"image":"R10580997-7e7796b4f04b73dc59b0b97fefd96a51_30646_905_286.png"}},{"insert":"\n\n然后去这个网站，把字体转成js文件\n"},{"attributes":{"link":"https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html"},"insert":"https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html"},{"insert":"\n转换后会下载一个js文件，在用记事本打开，双击里面最长的那个字符串，并复制\n"},{"insert":{"image":"R10580997-7eb191ec157afd50fab9b8426c358aa1_6237_677_65.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-53db377f6b8f32e82221c4ee76b5a3c0_83130_671_616.png"}},{"insert":"\n\n这个js字体文件，就是处理上面提到的那个乱码问题的字体。\n然后回到编辑器，给jspdf设置字体\n\n"},{"insert":{"image":"R10580997-fe9687111c298a55504f90470e0fdc40_288655_781_743.png"}},{"insert":"\n\n这个文件很长，浏览器内存不足，不要随便选中函数里的内容，不然会有点卡，请知悉\n\n"},{"insert":{"image":"R10580997-267cb26840cb685d62b756b04390ba0f_27525_668_100.png"}},{"insert":"\n\n其中 ："},{"attributes":{"bold":true},"insert":"AlibabaPuHuiTi-2-35-Thin-normal.ttf "},{"insert":"就是刚才生成的js字体文件标题，其实可以随便写，格式是xx.ttf 就行\n然后："},{"attributes":{"bold":true},"insert":"test "},{"insert":"就是这个导入字体的引用名称，自己随便写一个就行，后面会引用这个字体，保持一致就行\n其他的不变\n\n完整函数是：\n其中参数比较多，需要根据自己需求配置\n\nvar font = \"那个很长的字符串\"\nvar doc = new jspdf.jsPDF('', 'pt', 'a4'); // 获取实例\ndoc.addFileToVFS('AlibabaPuHuiTi-2-35-Thin-normal.ttf', font);\ndoc.addFont('AlibabaPuHuiTi-2-35-Thin-normal.ttf', 'test', 'normal');\ndoc.setFont('test');\nvar textWidth = doc.getStringUnitWidth(tableName) * doc.internal.getFontSize() / doc.internal.scaleFactor;\nvar textOffset = (doc.internal.pageSize.width - textWidth) / 2;\ndoc.text(textOffset,30, tableName);\ndoc.autoTable({\n \n showHead: 'firstPage',\n styles: {//设置表格的字体，不然表格中文也乱码\n overflow: 'linebreak',//自动换行\n lineColor: 50,//边框灰度值\n lineWidth: 1,//边框宽度\n fillColor: [255, 255, 255], \n font: 'test', \n textColor: [0, 0, 0], \n halign: 'center', \n valign: 'middle', \n fontSize: 12,\n },\n headStyles: { lineWidth: 1, halign: 'center',valign: 'middle', fillColor: '#ededed' },\n\n theme: 'grid', // 主题\n startY: 80, // 距离上边的距离\n margin: 50, // 距离左右边的距离\n body: rowsData, // 表格内容\n columns: columns\n});\n\ndoc.save(\"IVX测试.pdf\");\n以上函数需要几个入参\n"},{"insert":{"image":"R10580997-b13963497679d80ae4f5f79c22514b09_12336_849_151.png"}},{"insert":"\n\n列名，就是表格数据中，表头的值的一维数组，如 [\"标题1\",\"标题2\",\"标题3\"]\n数据，就是表格数据中，纯数据的值，我们可以用二维数组来装它，这里可以用一个函数，把对象数组改成二维数组\n"},{"insert":{"image":"R10580997-f5c4098e2d26c55cea4ae9f6a45c4c87_36689_603_720.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-98748b9025d1465037cb25efe086d6c2_92353_723_503.png"}},{"insert":"\n\n"}]
[{"insert":"1.需要一个DEMO，点击【导出】按钮后能把表格容器的内容，保存为PDF文件。（如果能把订单单号作为文档标题最佳。）\n\n"},{"insert":{"image":"R10514188-9ff3fcfd1f568a8c1a1cd62b067f5904_66326_541_1084.png"}},{"insert":"\n\n说明: 表格列数较多，查看时需要用手左右滑动查看没显示的内容，见下图。\n\n"},{"insert":{"image":"R10514188-01b10844d80ba890d0b70b78acb13b26_27947_567_496.png"}},{"insert":"\n\n"},{"insert":{"image":"R10514188-80f467aab1f9bcf3853572ed66c741c8_24898_577_421.png"}},{"insert":"\n\n"},{"insert":{"image":"R10514188-d54b5521bc437b099b5d509ec994d917_209920_1111_1365.png"}},{"insert":"\n"}]
R10580997-c4000631082815473d30f27999d94a69_103137_1651_969.png
https://fileb3bc9dd16bc5.v4.h5sys.cn/play/c4nSAraK