通过jspdf.js将一个页面或者一个div保存成pdf，然后可以通过pdf.js查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
<style>
.mapClass{
width: 500px;
height: 500px;
}
</style>
</head>
<body style="text-align:center;width: 100%;height: 100%">
<div style="width: 200px;height: 90px;background: red" onclick="jsPrintPdf()">点击打印pdf</div>
<div id="pdfPrint" style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 100%;height: 100%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main2" style="width: 600px;height:400px;"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<div class="printBox" style="width:650px;padding:10px;">
<!--第一页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
<!--第2页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
</div>
<div class="printBox" style="width:650px;padding:10px;">
<!--第一页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
<!--第2页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
</div>
<div class="printBox" style="width:650px;padding:10px;">
<!--第一页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
<!--第2页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
</div>
<div class="printBox" style="width:650px;padding:10px;">
<!--第一页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
<!--第2页-->
<div>
<p>标题xxxxx</p>
<div class="imgWrap">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
<img src="image/timg.jpg" style="display:inline-block;max-width: 300px;max-height:400px;">
</div>
<p>
<span>日期: 2018-07-11</span>
<span>备注：xxxxx</span>
</p>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var option2 = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<script type="text/javascript" src ="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src ="js/canvas2image.js"></script>
<script type="text/javascript" src ="js/html2canvas.min.js"></script>
<script type="text/javascript" src ="js/jspdf.debug.js"></script>
<script>
// function jsPrintPdf(){
// $('#pdfPrint').css("background","#fff");
//
//
// var width = $('#pdfPrint').offsetWidth; //获取dom 宽度
// var height = $('#pdfPrint').offsetHeight; //获取dom 高度
// var canvas = document.createElement("canvas"); //创建一个canvas节点
// var scale = 2; //定义任意放大倍数 支持小数
// canvas.width = width * scale; //定义canvas 宽度 * 缩放
// canvas.height = height * scale; //定义canvas高度 *缩放
// canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
//
// var filename = '物流单.pdf';
// var pdf = new jsPDF('p', 'mm','a4');
// var options = {
// pagesplit: true,
// scale: scale // 添加的scale 参数
// };
// pdf.addHTML($("#pdfPrint"),options, function(){
// pdf.output("save", filename);
// });
// }
页面转canvas再转PDF
//function jsPrintPdf(){
// var s = $('#pdfPrint');
// var pdf = new jsPDF('', 'pt', 'a4');
// var imgArr = new Array();
// for (var index = 0; index < s.length; index++) {
// html2canvas(s[index], {
// useCORS: true,
// scale: 2,
// background: "#F5F5F5",
// onrendered: function (canvas) {
// var img = new Image();
// img.width = canvas.width;
// img.height = canvas.height;
// img.src = canvas.toDataURL('image/jpeg', 1.0);
// imgArr.push(img)
// createPdf(pdf,imgArr,s.length);
// },
// })
// };
//}
//
//var createPdf = function (pdf,Arr, s) {
// if (Arr.length == s) {
// for (var i = 0; i < Arr.length; i++) {
// pdf.addImage(Arr[i].src, 'JPEG', 0, 0, Arr[i].width, Arr[i].height);
// if(i < Arr.length -1){
// pdf.addPage();
// }
// }
// pdf.save("test.pdf")
// }
//
//}
//页面转canvas再转PDF
function jsPrintPdf(){
var filename = '导出的页面名字.pdf';
var element = $("#pdfPrint"); // 这个dom元素是要导出pdf的div容器
var w = element.width(); // 获得该容器的宽
var h = element.height(); // 获得该容器的高
var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if(win_o>win_i){
abs = (win_o - win_i)/2; // 获得滚动条长度的一半
}
canvas.width = w *2; // 将画布宽&&高放大两倍
canvas.height = h*2 ;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft-abs,-offsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
html2canvas($("#pdfPrint"), {
useCORS: true,
dpi: window.devicePixelRatio * 2,
scale: 2,
width: w,
height: h,
pagesplit: true,
background: "#ffffff",
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(filename);
}})
}
// function jsPrintPdf() {
// var filename = '导出的页面名字.pdf';
// var copyDom = $("#pdfPrint");//要保存的dom
// var width = copyDom[0].offsetWidth; //dom宽
// var height = copyDom[0].offsetHeight; //dom高
// var scale = 2; //放大倍数
// var opts = {
// dpi: window.devicePixelRatio * 2,
// scale: scale,
// width: width,
// height: height,
// background: "#ffffff",
// useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
// };
//
// html2canvas(copyDom[0], opts).then(function(canvas) {
// var contentWidth = canvas.width;
// var contentHeight = canvas.height;
// var pdfWidth = (contentWidth + 10) / 2 * 0.75;
// var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
// var imgWidth = pdfWidth;
// var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
// var pageData = canvas.toDataURL('image/jpeg', 1.0);
// var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);
// pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
// pdf.save(filename);
// });
// }
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
