原生js将html页面变成pdf文件（html2canvas+jsPDF ）
一、html2canvas – 将dom变成图片：
下载或者安装html2canvas：官网
1、将文档放在本地，用原生js进行引用和使用。
① 新建一个名为 html2canvas.min.js 的文件，并且将线上的内容进行复制。
② 引入 js 文件：
// js直接引入 -- 未尝试
<script type="text/javascript" src="XXX/html2canvas.js"></script>
// layui使用
// 首先在html2canvas.js文件中添加exports
layui.define([],function(exports){
// 复制的内容...
exports('html2canvas',html2canvas);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
exports("conf", {
// 第三方扩展
extend: {
// 引入html转图片的插件
html2canvas: "lay/extends/html2canvas.min",
}
}
})
2、使用 npm 进行安装使用：
待续。。。
二、jsPDF – 将图片变成pdf：
下载或者安装jsPDF ：
- github
- 中文网站
- CDN
- Jspdf.es.js：ES 2015 模块格式。
- Jspdf.umd.js：UMD模块格式，用于 AMD 或脚本标签加载。
- Jspdf.polyfills.js：Internet Explorer等旧浏览器所需的兼容文件。
1、将文档放在本地，用原生js进行引用和使用。
① 新建一个名为 jsPDF.min.js 的文件，并且将线上（我找到的都不能用）或者资源 的内容进行复制。
② 引入 js 文件：
// js直接引入 -- 未尝试
<script type="text/javascript" src="XXX/jsPDF.js"></script>
// CDN引入 -- 未尝试
<script type="text/javascript" src="https://cdn.staticfile.org/jspdf/2.5.1/jspdf.umd.min.js"></script>
// layui使用
// 首先在jsPDF.min.js文件中添加exports
layui.define([],function(exports){
exports('jsPDF',jsPDF);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
exports("conf", {
// 第三方扩展
extend: {
// 引入图片转pdf的插件
jsPDF: "lay/extends/jsPDF.min",
}
}
})
2、使用 npm 进行安装使用：
待续。。。
三、使用：
1、 layui 或者原生js使用：
// html:
<div id="box">
<button id="btn">下载为pdf</button>
内容....
</div>
// js:
// layui引入：
layui.define(['html2canvas', 'jsPDF'], function (exports) {
var html2canvas = layui.html2canvas; // 引入html转图片
var jsPDF = layui.jsPDF; // 引入图片转pdf
// 初始化
var init = function() {
// 点击下载按钮
document.getElementById("btn").onclick=function(){
html2canvas(document.getElementById("box"),{
allowTaint: false, // 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法
backgroundColor: '#fff', // 画布背景色（如果未在DOM中指定）。设置null为透明
useCORS: true, // 是否尝试使用CORS从服务器加载图像
dpi: 192, // 导出pdf清晰度
scale: 2, // 用于渲染的比例。默认为浏览器设备像素比率。
}).then(canvas => {
// html生成图片的数据
var imageData = canvas.toDataURL('image/jpeg', 1.0);
// 原本的html页面的宽高
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
// 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595
var a4Width = 595; // A4 宽度
var a4Height = (595 / canvasWidth) * canvasHeight; // A4总高度
// 生成pdf的一页显示html的高度
let pageHeight = canvasWidth / 595 * 842;
// 未生成pdf的html页面高度，最初是整体的高度
let restHeight = canvasHeight;
// 页面上下偏移的大小
var position = 0;
/**
* 参数1：方向：l：横向 p：纵向
* 参数2：单位："pt"、"mm"、"cm"、"m"、"in"、"px"
* 参数3：格式：默认为a4
*/
var pdf = new jsPDF('p', 'pt', 'a4');
// 当内容未超过pdf一页显示的范围，无需分页
if (restHeight < pageHeight) {
/**
* 将图像添加到PDF中
* 参数1：图片的url
* 参数2：图片的格式
* 参数3：图片上下偏移的大小
* 参数4：原始宽度
* 参数5：原始高度
*/
pdf.addImage(imageData, 'JPEG', 0, position, a4Width, a4Height );
} else {
while(restHeight > 0) {
pdf.addImage(imageData, 'JPEG',0, position, a4Width, a4Height)
restHeight -= pageHeight;
position -= 842;
if(restHeight > 0) {
// 在PDF文档中添加新页面
pdf.addPage();
}
}
}
// 保存为pdf格式的文件
pdf.save('生成的pdf文件.pdf')
})
}
}
var Class = {
init: function (options) {
init();
return this;
}
}
exports('XXX', Class);
)}
2、 vue/react 框架进行使用：
待续。。。