手动绘制PDF

目录

引子

PDFKit

描述：

安装

特征

代码碎片示例

---

引子

近期突然发现回到老需求，绘制PDF，所以问了一下度娘，发现国内技术发展很快有很多js都可以满足我的需求了，比如jquery生成pdf插件jsPDF、pdf.js 等(HTML截图不再考虑范围内)

因为jQuery也是发展比较强大的库，所以对比了一下，发下其实都是在模仿，并没有发现兼容echarts使用api(可能是大概过导致的)，个人还是偏向 PDFKIT ,下面介绍一下PDFKit

PDFKit

描述：

PDFKit是用于Node和浏览器的PDF文档生成库，可轻松创建复杂的多页可打印文档。该API包含可链接性，并且包括低级功能以及用于高级功能的抽象。PDFKit API设计得很简单，因此生成复杂的文档通常和几个函数调用一样简单。

安装

npm install pdfkit

特征

矢量图形、文本、字体嵌入、图像嵌入、注解、概述、PDF安全性

代码碎片示例

☞ *** 注意 本次示例 为node版本 *** ☞

引入必要文件

require('./argv.js')    //接收启动node时候发送来的参数
const argv  = processFn(process.argv.slice(2));
const PDFDocument = require('pdfkit');    //重点这里，要看这里
const fs = require('fs');
const SVGtoPDF = require('svg-to-pdfkit');    //svg
const { platform, reportType, PDFType} = argv;

初始化

PDFDocument.prototype.addSVG = function(svg, x, y, options) {
    return SVGtoPDF(this, svg, x, y, options), this;
};
doc = new PDFDocument({
    size: 'A4',
    margin:0,
    padding:0
});

引入字体生成PDF

doc.registerFont("MainFont","./static/font/SourceHanSansSC-Regular.ttf");
doc.pipe(fs.createWriteStream('./pdf/'+new Date().getTime()+'.pdf')); 

结束

doc.end()

******** PDF中重点 echarts ************

const echarts = require('echarts')


echarts.setCanvasCreator(function () {
    return Canvas.createCanvas(100,200);
});

var chart = echarts.init(Canvas.createCanvas(800,400));

chart.setOption({...})

doc.image(chart.getDom().toBuffer(), obj.x-40, obj.y+50, {width:400,height:200}).stroke();
chart.dispose(); //结束绘制

以上是否对你有帮助呢，有的话点个赞吧。