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. 使用 ssm 实现登录日志记录

    使用 ssm 实现登录日志记录 学习总结 一.基础准备 1. 实现效果 2. 数据表 2.1 登陆日志信息表 2.3 员工表 二.代码实现 1. SysLogLogin 实体类 2. LogAspec ...

  2. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  3. box-shadow 阴影的高级用法，多个阴影叠加

    box-shadow的这些用法你知道吗? $shadowH: ''; @for $i from 1 through 12 { $shadowH: #{$shadowH}, 0 ($i * 30px) ...

  4. Spring Boot 使用 Redis 共享 Session 代码示例

    参考资料 博客:spring boot + redis 实现session共享 1. 新建 Maven 工程 我新建 spring-boot-session-redis maven 工程 2. 引入 ...

  5. OSPF 路由协议详解（一）

    (文章目录) ospf 协议是网络层协议 此篇文章适合有一定网络基础的人 ospf 协议最多应用在企业网络中,针对于运营商网络并不是特别的适用,端口号为 89 通过 IP 进行数据的转发 ospf 基 ...

  6. 学习day44

    初步学完html的知识

  7. HbuilderX失焦时自动保存编辑器内容

    hbuilderX 有一个非常好用的功能:就是自动保存. 而且不需要安装什么插件,只需要在编辑器设置就可以了.接下来我们一起来设置吧: 1.打开我们的hbuilderX编辑器.在最上排选项栏里打开 & ...

  8. Android Studio 的蓝牙串口通信（附Demo源码下载）

    根据相关代码制作了一个开源依赖包,将以下所有的代码进行打包,直接调用即可完成所有的操作.详细说明地址如下,如果觉得有用可以GIthub点个Star支持一下: 项目官网 Kotlin版本说明文档 Jav ...

  9. 爬虫亚马逊Bestselling类别产品数据TOP100

    1 # -*- coding: utf-8 -*- 2 # @Time : 2020/9/11 16:23 3 # @Author : Chunfang 4 # @Email : 3470959534 ...

  10. OSPF MTU问题

    OSFP(开放式最短路径优先)链路状态协议,IGP 1.mtu 检测 链路俩段不匹配 假设双方的mtu不一致时 ospf建立如下: R1与R2交互hello报文,其中包含:目的IP地址:224.0.0 ...