JS - 使用 html2canvas 将页面转PDF

本方法可以将页面元素块转为pdf.

网站地址

jspdf.js

html2canvas.js

1、引入JS文件

<script src="jspdf.js"></script>

<script src="html2canvas.js"></script>

2、html代码

<!DOCTYPE html>

<html>

<body class="body">

<div id="div1">

  <p>

      test

    </p>

</div>

</body>

</html>

3、js调用

function print(){

           let targetId = "div1"

     // targetId:dom元素的id;第二个参数：打印方向 l：横向  p：纵向

           let base64PrintData = domToPdfBase64(targetId, "p");

}


/*

 * @param targetId   页面元素id

 * @param printOrientation   页面打印方向 l：横向  p：纵向

 * @return pafbase64

 */

function domToPdfBase64(targetId, printOrientation) {

    var targetDom = document.getElementById(targetId); //你的目标元素id

    var copyDom = targetDom.cloneNode(true) // 克隆节点

    copyDom.style.width = targetDom.offsetWidth + 'px'

    copyDom.style.height = targetDom.scrollHeight + 'PX' // 获得高度

    document.body.appendChild(copyDom) // 插入节点

    html2canvas(copyDom).then((canvas) => {

        document.body.removeChild(copyDom) // 删除节点

        var contentWidth = canvas.width;

        var contentHeight = canvas.height;

        //一页pdf显示html页面生成的canvas高度;

        var pageHeight = contentWidth / 595.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 = 595.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        //第一个参数： l：横向  p：纵向;第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）;第三个参数：可以是下面格式，默认为“a4”

        var pdf = new jsPDF(printOrientation, 'pt', 'a4');

        if (leftHeight < pageHeight) {

            // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；

            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

        } else { // 分页

            while (leftHeight > 10) {

                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

                leftHeight -= pageHeight;

                position -= 871.89;

                //避免添加空白页

                if (leftHeight > 10) {

                    pdf.addPage();

                }

            }

        }

        let pdf64 = pdf.output("datauristring").replace("data:application/pdf;base64,", "");

        console.log(pdf64);

        //pdf预览

        let blob = base64ToBlob(pdf64);

        //获取当前url，直接放到iframe就能用，下载同理。直接将blobURL放到浏览器可以预览

        let blobURL = window.URL.createObjectURL(blob);

        console.log(blobURL);

        return pdf64;

    })

}

版权声明：本文为博客园博主「Spear_J」的原创文章，转载请附上原文出处链接及本声明。

https://www.cnblogs.com/lmh15054109/p/16326957.html

JS - 使用 html2canvas 将页面转PDF的更多相关文章

  1. JS 使用html2canvas实现页面截图功能

    html2canvas的官方文档地址:http://html2canvas.hertzen.com/ 实现原理:将需要截图的页面在canvas中进行重绘,这样将页面转换成图片的过程. 注意事项: 不支 ...

  2. js将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 先来科普两个插件: html2Canvas 简介 我们可以直接在浏览器端使用html2 ...

  3. Javascript 将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个 ...

  4. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  5. html页面转PDF、图片操作记录

    前言 日常开发中,我们有可能会碰到从系统中导出数据并打印的需要,打印的格式是常规的表格形式,例如: 本文记录使用js库html2canvas + jspdf实现html转PDF.图片,并下载 画出页面 ...

  6. Vue使用html2canvas将页面转化为图片

    需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

  7. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  8. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  9. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

随机推荐

  1. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

  2. 驳《我不是很懂 Node.js 社区的 DRY 文化》

    今天在群里有人讨论方老师的文章<我不是很懂 Node.js 社区的 DRY 文化>,我也看了一遍,槽点太多,不知道如何下笔. 方老师分析了几个依赖最多的 npm 包,每个都只有不到百行代码 ...

  3. PostgreSQL执行计划：Bitmap scan VS index only scan

    之前了解过postgresql的Bitmap scan,只是粗略地了解到是通过标记数据页面来实现数据检索的,执行计划中的的Bitmap scan一些细节并不十分清楚.这里借助一个执行计划来分析bitm ...

  4. 玩转NET Expression

    using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...

  5. drf中的请求与响应

    请求与响应(3星) 请求:Request REST framework 传入视图的request对象不再是Django默认的HttpRequest对象,而是REST framework提供的扩展了Ht ...

  6. shell、bash和sh区别

    shell是你(用户)和Linux(或者更准确的说,是你和Linux内核)之间的接口程序.你在提示符下输入的每个命令都由shell先解释然后传给Linux内核. shell 是一个命令语言解释器(co ...

  7. sqlplus文件查看自带oracle命令的执行过程

    问题描述:看到一篇文章 在$ORACLE_HOME/bin/sqlplus中可以查看到数据库命令的查询语句.可以直接编辑sqlplus文件,查到到我们平时标准系统命令的原脚本,但是自己进行编辑查看却是 ...

  8. [翻译] Cassandra 分布式结构化存储系统

    Cassandra 分布式结构化存储系统 摘要 Cassandra 是一个分布式存储系统,用于管理分布在许多商品服务器上的大量结构化数据,同时提供无单点故障(no single point of fa ...

  9. 1.5 万字 + 40 张图解 HTTP 常见面试题

    作者:小林coding 图解计算机基础网站:https://xiaolincoding.com 大家好,我是小林,我最开始写的第一篇图解文章就是这篇: 那时候我也就不到 100 读者,如今这篇阅读都快 ...

  10. Java 从零开始实现一个画图板、以及图像处理功能，代码可复现

    Java 从零开始实现一个画图板.以及图像处理功能,代码可复现 这是一个学习分享博客,带你从零开始实现一个画图板.图像处理的小项目,为了降低阅读难度,本博客将画图板的一步步迭代优化过程展示给读者,篇幅 ...