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. 《头号玩家》AI电影调研报告（二）

    四. 涉及前沿技术及与现实的交互 1.VR技术 在影片中,斯皮尔伯格用他认为未来的VR虚拟技术为我们创造了众多精彩的画面,令人佩服其对科技的预见性.其中好多的装备特别引人注目,部分也在现实中存在:VR ...

  2. EFCore 6.0入门看这篇就够了

    前言 作为一直在dotNet行业耕耘的码农,这几年在大大小小项目中也涉及到了许多ORM框架,比如:EFCore,Dapper,NHibernate,SqlSugar等等,这些ORM都有各自的优缺点,大 ...

  3. Wireshark查找与标记数据包

    查找数据包 按Ctrl-F. 查找数据包提供了4个选项: 显示过滤器(Display filter):该选项可以让你通过输入表达式进行筛选,并只找出那些满足该表达式的数据包.如:not ip, ip. ...

  4. SpringBoot2.x修改Redis序列化方式

    添加一个配置类即可: /** * @Author FengZeng * @Date 2022-03-22 13:43 * @Description TODO */ @Configuration pub ...

  5. 修复tunl0-二进制安装calico

    这篇博文很重要,出现这个问题导致pod之间无法通讯,pod无法连接外网. 出现的问题是二进制方式安装了节点之后, tunl0没有显示,通过ifconfig tunl0 up 启动tunl0 没有意义, ...

  6. 自家APP打开微信小程序，可行吗？

    小程序的通用解决方案,今天为大家介绍一下FinClip.它的最大特点,就是能够让任何 App 运行小程序. 只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了.除了 SDK,它还提 ...

  7. Java学习day36

    元注解:负责注解其他注解,Java定义了4个标准的meta-annotation类型,用来提供对其它annotation类型作说明 1.@Target:用于描述注解的使用范围(即被描述的注解可以用在什 ...

  8. vue 跨域配置代理 get/post 请求

    1.第一步要有 axios 插件 : npm i axios 首先要在自己的项目手动添加一个文件 vue.config.js 个人理解的为 这是axios 封装的跨域文件. 2.vue.config. ...

  9. C#常见控件与SQL Sever数据库交互

    C#常见控件与SQL Sever数据库交互 下拉框(ComboBox)与数据库绑定 首先,我们采用DataSet作为临时的数据库,这样会比较好 那么,我们先创建两个成员(对象) string sqlc ...

  10. Linux ubuntu下docker容器安装和基础命令

    Docker介绍: 云计算就好比大货轮,docker就是集装箱虚拟机虽然可以隔离出很多"子电脑",但占用空间更大,启动更慢,虚拟机软件可能还要花钱(例如VMWare). 而容器技术 ...