1.问题:
需要将页面的某一部分的html转换为一个pdf的文件
2.解答:
jspdf使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<button id="btn">导出pdf</button>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
<script>
var obtn = document.getElementById("btn");
obtn.onclick=function(){
console.log(123);
var pdf = new jsPDF();
var print_content = document.getElementById('container');
// 修改背景色
print_content.style.cssText="background: #fff";
var filename = 'hello.pdf';
pdf.addHTML(document.getElementById('container'), function(){
pdf.output("save", filename)
})
}
</script>
</body>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
</html>
</body>
</html>
可以看出效果好差
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
