通过 jspdf 插件将 html 某个标签在线转 pdf 文件

2021-1-13 Jon js库

前端开发中,有时会有将页面某个 div 的内容转成 pdf 文件,这将会用到 html2canvas 和 jspdf js插件来解决。

html 代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通过 jspdf 插件将 html 标签在线转 pdf 文件</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #orgChart {
      background: yellow;
      border: 1px solid red;
      font-size: 20px;
      font-weight: bold;
      font-family: initial;
    }
    #pdfDown {
      width: 100px;
      color: #fff;
      background: #1890ff;
      height: 30px;
      border: 0;
      cursor: pointer;
      float: right;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div>
    <h1>html 标签转 pdf</h1>
  </div>
  <div id="orgChart">
    <h1>这是一行文本</h1>
    <p><i>这是一个p标签</i></p>
    <p><i>这是一个p标签</i></p>
    <p><i>这是一个p标签</i></p>
    <p><i>这是一个p标签</i></p>
    <p><i>这是一个p标签</i></p>
  </div>
  <button type="button" id="pdfDown">PDf导出</button>
  <!-- JS -->
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js"></script>
  <script>
    // 转存 pdf
    $("#pdfDown").on('click',function(){
      // 要生成PDF的 div
      var element = $("#orgChart");
      // 获得该容器的宽 高
      var w = element.outerWidth()
      var h = element.outerHeight()
      // 获得该容器到文档顶部和最左的距离
      var offsetTop = element.offset().top;
      var offsetLeft = element.offset().left;
      // 画布
      var canvas = document.createElement("canvas");
      // 将画布宽&&高放大两倍
      canvas.width = w * 2;
      canvas.height = h * 2;
      var context = canvas.getContext("2d");
      var scale = 2;
      context.scale(2, 2);
      context.translate(-offsetLeft, -offsetTop);
      var opts = {
        scale: scale,
        canvas: canvas,
        width: w,
        height: h,
        useCORS: true,
        background: '#ffffff'
      }
      html2canvas(element, opts).then(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*1.01;
        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('content.pdf');
      })
    })
  </script>
</body>
</html>

标签: js jspdf

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap