这篇文章主要介绍了HTML转PDF的纯客户端和纯服务端完成计划，文中经过示例com域名价格代码介绍的十分具体，对我们的学习或者工作具有必定的参阅学习价值，需求的朋友们下面随着小编来一起学习学习吧

需求

用户填写表单，点击保存之后，能够直接下载pdf文档。

处理思路

服务端生成

思路

谷歌浏览器在17年自行开发了Chrome Headless特性，并与之一起推出了 puppeteer，它能够被理解为是无界面但是能够完成服务器功能特性的浏览器。

所以咱们能够在服务端发动puppeteer浏览器，翻开目标网址，运用chrome浏览器自带的转化功能进行html到pdf的转化。

服务端生成中心代码

首先要装置puppeteer，npm装置或许会犯错，最好运用cnpm淘宝镜像装置。

输入 cnpm i puppeteer -S 装置依靠。

创立一个js文件，只需求用puppeteer浏览器翻开网址，保存pdf即可。

// html2pdf.js

const puppeteer = require(‘puppeteer’);
(async function(){
// 发动服务
const browser = await puppeteer.launch();
// 翻开标签页
const page = await browser.newPage();
// 转到该地址
await page.goto(‘https://koa.bootcss.com/#context’);
// html页面转pdf并保存至path
await page.pdf({path:”test.pdf”,format:’A4′})
// 封闭浏览器
await browser.close();
})();

然后控制台输入 node html2pdf.js 发动服务。

当然也能够module.export将模块方法导出，依据业务逻辑来。

缺陷

无法保存表单动态数据

由于是从服务端请求页面，假如不在请求地址上保存用户输入，截出来的pdf将是页面没被填写的初始状况。

换而言之，他只能进行静态页面的转化，因为咱们的需求有大量用户输入，因此pass。

客户端生成中心代码

思路

运用html2canvas，输入需求转化的dom节点，遍历转化成canvas画布

将canvas画布转成base64图片，运用jsPDF创立pdf文件，把图片刺进进pdf。

缺陷

失真。

咱们能够很明显的发现，既然是类似于对页面截图再将截图刺进pdf，页面的分辨率和装备很或许影响输出图片的质量。

一起，因为是截图，或许失掉页面链接等功能。

文字切断

当canvas画布大于pdf一页巨细时，输出就会犯错，这时咱们需求判别canvas画布是否超出A4巨细，假如超出，对canvas进行分割，刺进到不同的页面。

这时候问题又来了，既然是分割图片，那么很或许导致图片或者文字从一半就被切断，因为咱们无法剖析canvas内部item的结构。

中心代码

咱们的需求没有图片和链接，所以失真的问题对咱们影响不大，一起咱们的表单由多个重复等长的item组成，而且这些item都十分短，不会超出一张A4纸（尽管这样不谨慎，假如需求，你能够获取DOM元素宽高，依据DOM元素高度裁剪）。

所以我打算直接依据item切分canvas，每个item给一页A4纸保存。

在开端之前需求理解几个中心方法：

html2canvas

// DOM是要转化的DOM节点
html2canvas(DOM,{
backgroundColor:”#ffffff”,
width:width,
height:height,
scale:2,
allowTaint:true,
}).then((canvas)=>{
// canvas 是转化成功后的画布
})

jsPDF

// 创立实例
let pdf = new jsPDF(”,’pt’,’a4′);
// 将图片增加到pdf文件里
// 第一个参数是待刺进的文件（base64）格局，第二个是文件格局
// 第三第四是图片左上角的坐标，最终两个是图片刺进后的宽高
pdf.addImage(image,’JPEG’,10,10,height,width);
// 增加新的一页
pdf.addPage()
// 保存pdf文件
pdf.save()

canvas

// canvas是待剪切的图片
// sx，sy是开端裁剪的坐标
// swidth、sHeight是裁剪的宽高
// dx、dy是裁剪后图像在canvas中刺进的坐标
// sWidth,sHeight是裁剪后图像在canvas中的宽高
cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);

/**
* @description: 表单转pdf文件
* @return: pdf
*/
onSubmit(){
// 这是我要转化的表单，里面有许多一样的表格
let form = this.$refs.form;
// 获取元素的宽高
let width = form.getBoundingClientRect().width;
let height = form.getBoundingClientRect().height;
html2canvas(form,{
backgroundColor:”#ffffff”,
width:width,
height:height,
scale:2,
allowTaint:true,
}).then((canvas)=>{
let pdf = new jsPDF(”,’pt’,’a4′);
// 进行图片切割
let canvasList = this.splitCanvas(canvas,this.forms.length);

// 遍历canvas列表，每页增加一张图片
canvasList.forEach((item,index)=>{
// 转化图片格局为base64
let itemImage = item.toDataURL(‘image/jpeg’,1.0);
// 预留10px边距，A4纸的宽在72分辨率的显示器上是595px
pdf.addImage(itemImage,’JPEG’,10,10,575.28,575.28/item.width*item.height);
// 假如不是最终一页，则分页
index == this.forms.length-1 ? ” : pdf.addPage();
})
// 文件保存
let blob = pdf.output(‘blob’);

pdf.save(‘test.pdf’);
})
},
/**
* @description: 对canvas进行切割
* @param {number} num 切片数量
* @param {canvas} canvas
* @return {array} canvas列表
*/
splitCanvas(canvas,num){
let height = canvas.height,width = canvas.width;
let chunkHeight = height/num;// 每个切片的高度
let chunkList = [];// 存放结果canvas
for(let i=0; i // 初始化裁剪矩形框位置
let sx = 0,sy = i,sWidth = width,sHeight = chunkHeight,dx = 0, dy = 0;
// 创立一个canvas节点
let canvasItem =document.createElement(“canvas”);
// 初始化画布巨细
canvasItem.height = chunkHeight;
canvasItem.width = width;
let cxt = canvasItem.getContext(“2d”);
// 将裁剪的图片放到新的canvas节点
cxt.drawImage(canvas,sx,sy,sWidth,sHeight,dx,dy,sWidth,sHeight);
chunkList.push(canvasItem);
}
return chunkList;
},

到此这篇关于HTML转PDF的纯客户端和纯服务端完成计划的文章就介绍到这了,更多相关HTML转PDF内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，期望我们今后多多支持脚本之家！