给页面内所有要转换成PDF的HTML元素添加一个class="item" ，
遍历所有class="item"的HTML元素，
将它们逐个加入到pdf文档中，添加的时候计算图片高度和页面高度，如果超过另起一页。
下面直接上代码
async function printOut(title) {
//打印的内容
var ele = document.querySelector('#printId');
//根据特定的class 筛选出来的List (防止文字被切断)
let item = ele.querySelectorAll(".item")
let eleW = ele.offsetWidth// 获得该容器的宽
let eleH = ele.offsetHeight// 获得该容器的高
let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
var canvas = document.createElement('canvas')
var abs = 0
let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) {
// abs = (win_o - win_i)/2; // 获得滚动条长度的一半
abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
// console.log(a, '新abs');
canvas.width = eleW * 2 // 将画布宽&&高放大两倍
canvas.height = eleH * 2
var context = canvas.getContext('2d')
context.scale(2, 2)
context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
var pdf = new jsPDF('', 'pt', 'a4')
let position = 0 //页面偏移
let pageHeight = 801.89 //PDF页面高度
for (let i = 0; i < item.length; i++) {
canvas = await html2canvas(item[i], {dpi: 300, useCORS: true})
// console.log(item[i])
var contentWidth = canvas.width
var contentHeight = canvas.height
// a4纸的尺寸[595.28,841.89]
var imgWidth = 535.28 //图片宽度 原是595.38，因左右留白30，减去60
var imgHeight = 595.28 / contentWidth * contentHeight //图片高度
var pageData = canvas.toDataURL('image/jpeg', 1.0)
if (imgHeight < pageHeight){
if (position === 0){ //页面偏移为0
position = 30; //第一张图片，上边距留白30，页面偏移从30开始
}else { //页高剩余的高度不足放下当前图片高度，则另起一页
pdf.addPage() //新增一张空白的页面
position = 0 //页面偏移初始化
pageHeight = 801.89 //页面高度初始化
if (position === 0){
position = 30; //第一张图片，上边距留白30，页面偏移从30开始
//pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片
//position = position + imgHeight;
//pageHeight = pageHeight - imgHeight;
pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片，30：为向左偏移30
position = position + imgHeight; //新偏移 = 旧偏移 + 图片高度
pageHeight = pageHeight - imgHeight; // 新页面高度 = 剩余页高 - 图片高度
pdf.save(title + '.pdf')
原文地址：https://www.cnblogs.com/zbit/p/15080930.html
文中内容是在 Vue 项目中使用
html
2canvas和 js
pdf
插件实现将页面的内容生成
PDF
，并记录在使用过程中遇到的一些
问题
和
解决
方案。文中将会贴出很多参考文章，如果各位有需要，可以前往原文章查阅。
html
2canvas + js
pdf
介绍使用方法分页分割
问题
html
2canvas生成图片只有一半其他参考文章
1、
html
2canvas
该插件允许我们直接在浏览器上对网页或其部分进行“截图”操作，但是屏幕截图基于 DOM，这一点很关键。这就会导致截图的结果，很可能不是自己想要的。.
在打印表格
时
，偶尔出现表格内容显示不
完整
的状况，这是什么原因导致的呢？出现这样的情况应该如何处理？接下来为大家介绍几种处理方法，可以对应情况来
解决
。一、取消打印区域打印表格显示不
完整
，有可能是因为设置了固定的打印区域，导致打印表格
时
，只打印所选则的区域。遇到这样的情况，点击上方菜单栏-页面布局-打印区域-取消打印区域，即可全部显示出内容。二、更改分页设置可以点击上方菜单栏-页面布局-分页预览，点击...
为了使横向滚动条的内容全部展示，需要指定 width: document.getElementById(id).scrollWidth。
<div ref="myContainer">
<!-- 我是需要导出的内容 -->
// 生成
pdf
get
PDF
() {
this.generate
PDF
(
this.$refs.myContainer,
"我是下载的
pdf
的名字，随便起.
var
pdf
Content = document.getElementById("
pdf
Div");var width =
pdf
Content.offsetWidth; //获取dom 宽度var height =
pdf
Content.offsetHeight; //获取dom 高度var canvas = document.createElement("canvas"); //创建一个ca...
欢迎关注我的公众号《人生代码》我有一个大胆的想法，我要一直写到死，那一天我不写了，可能就死了。哈哈。哈喽，大家好，我是你们的攻城狮，人贱人爱的 Ken，一个永远充满激情的人。最近接收到一个优化需求：就是对之前的行程文档的图文介绍添加打印生成
pdf
的功能当然，我们需要依赖
html
2canvas 和 js
pdf
.min.js 这两个库，
html
2canvas 是用于生成 canvas，js
pdf
...
一，
html
2
pdf
—
html
页面下载
pdf
文件
需求：
html
2
pdf
—
html
页面下载
pdf
文件
使用的插件js是
html
2
pdf
.js，
html
2
pdf
官方链接地址，
按照官方的说明，直接调用save方法就可以。
var element = document.getElementById('element-to-print');
var opt = {
margin: 1,
filename: 'myfile.
pdf
',
image: { type: 'j
如果不是有特别的需求，比如打印或者分页，还是建议能在一页显示
pdf
，这样就避免了
文字
被截断的风险。
不做分页处理
html
2canvas(copyDom[0], opts).then((canvas) => {
debugger
var contentWidth = canvas.width;
var contentHeight =...
Js
pdf
是一个将
html
内容生成
pdf
文件的库，原理是对输入浏览器的
文字
或二进制图片进行base64编码
转换
，以
pdf
中应有的形式组织，最终以data uri scheme,
data:application/
pdf
;base64;[content] 的格式输出
里面的save方法是如何做到浏览器端保存文件的呢?
看下这个:
<a href="data:ima...
