html转pdf，是先把html截成图片，在把图片转成pdf。
需要引入html2canvas.js和jspdf.debug.js两个文件，因为分页的话，会出现很丑的分割线，所有这个例子是不分页的，直接看个demo吧。（主要scale和dpi来提高清晰度）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<title>移动端html转pdf</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
<script type="text/javascript" src="//js.tgimg.cn/jquery/base/jquery.min.js"></script>
<script src="//js.tgimg.cn/Common/html2canvas.js?v=202010091048" charset="gb2312"></script>
<script src="//js.tgimg.cn/Common/jspdf.debug.js?v=202010091048" charset="gb2312"></script>
<style type="text/css">
.main{
min-width: 320px;
max-width: 750px;
width: 100%;
margin: 0 auto;
position: relative;
}
img{
width: 24.5rem;
height: 13rem;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div class="main" id="main">
<button class="down-pdf" id="downPdf">点击下载pdf</button>
<h1>移动端html转pdf</h1>
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
<img style="width: 100%;" src="//img.tgimg.cn/Mproject/v5/no-data.png" />
</div>
<script type="text/javascript">
$(function() {
// 获取像素比
function getDPR() {
if(window.devicePixelRatio && window.devicePixelRatio > 1) { //返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
return window.devicePixelRatio;
}
return 1;
}
var template = document.getElementById('main');
function scaleCanvas() {
var dom = template;
const box = window.getComputedStyle(dom);
const width = box.width.replace('px', '');
const height = box.height.replace('px', '');
const scaleBy = getDPR();
const canvas = document.createElement('canvas');
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 设定 canvas css宽高为 DOM 节点宽高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
// 获取画笔
const context = canvas.getContext('2d');
// 将所有绘制内容放大像素比倍
context.scale(scaleBy, scaleBy);
var rect = template.getBoundingClientRect(); //获取元素相对于视察的偏移量
context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
html2canvas(template, {
canvas, //将放大的cnavas作为参数传进去
scale: 2, //缩放比例
dpi: 300, //将分辨率提高到特定的DPI（每英寸点数），DPI的值越高，扫码的清晰度越高
background: '#FFFFFF', //背景颜色
onrendered: function(imgCanvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
var pdfX = (contentWidth + 10) / 2 * 0.75;
var pdfY = (contentHeight + 200) / 2 * 0.75; //200为底部留白
var imgX = pdfX;
var imgY = (contentHeight / 2 * 0.75);
var pdf = new jsPDF('', 'pt', [pdfX, pdfY]);
pdf.addImage(pageData, 'JPEG', 0, 0, imgX, imgY);
pdf.save("html转pdf的demo.pdf");
},
useCORS: true, //貌似与跨域有关，但和allowTaint不能共存
allowTaint: false, //允许跨域
});
}
$("#downPdf").click(function() {
scaleCanvas();
})
})
</script>
</body>
</html>
效果图如下：
b80d825e5622543a51caaef71cc183f.png
网友评论