HTML转pdf下载 html2canvas.js清晰优化

最新推荐文章于 2025-05-30 09:29:29 发布

行走的鹄

最新推荐文章于 2025-05-30 09:29:29 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java js 文章标签： html转pdf html2canvas.js jspdf.debug.js html2canvas.js清晰度优化

本文链接：https://blog.youkuaiyun.com/weixin_39182073/article/details/82944233

Java 同时被 2 个专栏收录

7 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一种将HTML转换为PDF的方法，通过html2canvas和jsPDF库实现页面内容的清晰转换与下载。示例代码展示了如何处理图表数据，调整图片清晰度及布局，确保PDF质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                               ## HTML转pdf下载 html2canvas.js清晰优化

1.最近遇到一个开发问题（HTML转pdf）找了很多资料以下是我写的一个demo，仅供大家参考哦

<body>
    <div id="main" style="height:400px"></div>
    <button onclick="createPDFObject()">download pdf</button>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        backgroundColor: 'white',
        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">
    function createPDFObject() {
      html2canvas(document.getElementById("main"), {
       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;

      //返回图片dataURL，参数：图片格式和清晰度(0-1)
      var pageData = canvas.toDataURL('image/jpeg', 1.0);

      //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
      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('stone.pdf');

  }
});

}

首先先引入这个两个js html2canvas.js和jspdf.debug.js
先生成一个统计柱状图然后利用html2canvas将html转成图片
//返回图片dataURL，参数：图片格式和清晰度(0-1)
var pageData = canvas.toDataURL(‘image/jpeg’, 1.0);
最后生成pdf 并下载
//有两个高度需要区分，一个是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(‘stone.pdf’);