使用jspdf库动态构建pdf预览页

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。

官网地址：https://parall.ax/products/jspdf
下载之后，里面有例子可以预览效果：

使用方式

创建您的第一个文档

看examples/basic.html例子。

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

这个代码会构建一个hello world的pdf文件下载到本地
使用示例

• 1、动态构建文本

var doc = new jsPDF();
  
doc.text(20, 20, 'This is the default font.');
  
doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'This is courier normal.');
  
doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');
  
doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');
  
doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');

• 2、动态构建图片

// You'll need to make your image into a Data URL
// Use http://dataurl.net/#dataurlmaker
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4ge....../2Q==';
  
var doc = new jsPDF();
  
doc.setFontSize(40);
doc.text(35, 25, "Octonyan loves jsPDF");
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);

3、将HTML转化为pdf显示（可用于打印的时候，打印指定部分的内容）

var doc = new jsPDF();
  
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};
  
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});