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. 多页面共用sessionStorage的实现

    sessionStorage的局限:   sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多 ...

  2. 【uniapp 开发】字典工具类 ObjectUtil

    {__/} ( • - •) /つ寿司 你要不要? {__/} ( • - •) /つ草莓 你要不要? {__/} ( • - •) /つ披萨 你要不要? {__/} ( • - •) /つ桃子 你要 ...

  3. Android的Activity屏幕切换动画左右滑动切换

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...

  4. C++中的算法头文件<algorithm>，<numeric>和<functional>

    算法部分主要由头文件<algorithm>,<numeric>和<functional>组成.<algorithm>是所有STL头文件中最大的一个,它是 ...

  5. 在Wireshrak中使用过滤器——捕获过滤器

    过滤器可以让你找出你所希望进行分析的数据包.简单来说,一个过滤器就是定义了一定条件,用来包含或者排除数据包的表达式.如果你不希望看到一些数据包,你可以写一恶搞过滤器来屏蔽它们.如果你希望只看到某些数据 ...

  6. SpringMVC快速使用——基于XML配置和Servlet3.0

    SpringMVC快速使用--基于XML配置和Servlet3.0 1.官方文档 https://docs.spring.io/spring-framework/docs/5.2.8.RELEASE/ ...

  7. 携程apollo配置中心服务端如何感知配置更新？

    引言 前面有写过一篇<分布式配置中心apollo是如何实时感知配置被修改>,也就是客户端client是如何知道配置被修改了,有不少读者私信我你既然说了client端是如何感知的,那服务端又 ...

  8. 在边缘计算场景中使用Dapr

    Dapr 是分布式应用程序可移植.事件驱动的运行时, 这里有几个关键字,我们拆开来看一下: 分布式: 代表共享或是分散,在云原生应用上体现为微服务,在边缘计算场景中代表分散的模块,可以做积木式拼接. ...

  9. 【LeetCode】49. 字母异位词分组

    49. 字母异位词分组 知识点:字符串:哈希表 题目描述 给你一个字符串数组,请你将 字母异位词 组合在一起.可以按任意顺序返回结果列表. 字母异位词 是由重新排列源单词的字母得到的一个新单词,所有源 ...

  10. jointJS初使用随记

    jointJs使用随记 1.下载与安装 前提:一个健康良好且干净的vue脚手架项目. 还是普遍的安装方式 yarn:yarn add jointjs npm:npm install jointjs 还 ...