JS导出PDF插件的方法(支持中文、图片使用路径)

下面给出JS导出PDF插件的方法及示例说明。

标题

1. 安装jsPDF

首先，我们需要安装jsPDF这个插件。打开命令行窗口，进入我们项目所在的目录，运行以下命令：

npm install jspdf --save

2. 导入中文字体

jsPDF默认不支持中文字体，我们需要引入一些中文字体。这里以SimSun为例。

<!-- 在html文件里引入中文字体 -->
<script src="./simsun.js"></script>

其中simsun.js是SimSun字体转换为js文件后生成的。

3. 创建PDF文件

接下来，我们可以开始创建PDF文件了。代码如下：

var doc = new jsPDF('p', 'mm', 'a4');
doc.setFont('SimSun');
doc.text('你好，世界', 10, 10);
doc.save('filename.pdf');

这段代码创建了一个A4纸，306×396毫米大小的pdf文件，并将SimSun字体设置为当前字体。然后，在文档中添加了一段中文文本“你好，世界”，并将文档保存成名为“filename.pdf”的文件。

4. 添加图片

如果需要添加图片，需要先通过DataURL的方式获取图片数据。代码如下：

var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZ...';

doc.addImage(imgData, 'JPEG', 10, 10, 50, 50); // 添加图片

其中，imgData就是图片的DataURI，我们可以用Image对象的toDataURL()方法来获取该值。addImage方法用于将图片添加到文档中。

5. 完整示例

下面是一个完整的示例，展示如何创建一个包含中文字体，图片和文本的PDF文件。

var doc = new jsPDF('p', 'mm', 'a4');
doc.setFont('SimSun');
doc.text('你好，世界', 10, 10);

var img = new Image();
img.onload = function() {
  var imgData = getBase64Image(img);
  doc.addImage(imgData, 'JPEG', 10, 30, 100, 100);
  doc.save('filename.pdf');
};
img.src = './image.jpg';

/**
 * 通过canvas将图片转为DataURI
 * @param {img} 图片对象
 */
function getBase64Image(img) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);

    var dataURL = canvas.toDataURL('image/jpeg');
    return dataURL;
}

这段代码将创建一个A4纸大小的PDF文件，并在文档中添加一段中文文本“你好，世界”，以及一张图片。最后保存文件到本地。