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. 用Python爬取斗鱼网站的一个小案例

    思路解析: 1.我们需要明确爬取数据的目的:为了按热度查看主播的在线观看人数 2.浏览网页源代码,查看我们需要的数据的定位标签 3.在代码中发送一个http请求,获取到网页返回的html(需要注意的是 ...

  2. java基础-多线程互斥锁

    多线程(JDK1.5的新特性互斥锁)* 1.同步 * 使用ReentrantLock类的lock()和unlock()方法进行同步* 2.通信 * 使用ReentrantLock类的newCondit ...

  3. 记一次修改框架源码的经历，修改redux使得redux 可以一次处理多个action，并且只发出一次订阅消息

    redux是一个数据状态管理的js框架,redux把行为抽象成一个对象,把状态抽象成一个很大的数据结构,每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变,根据出发这次改变的不同从而有各 ...

  4. 微信小程序列表拖动排序Demo

    wxml页面编写 <view class="container"> <view bindtap="box" class="box&q ...

  5. python+pytest接口自动化(13)-token关联登录

    在PC端登录公司的后台管理系统或在手机上登录某个APP时,经常会发现登录成功后,返回参数中会包含token,它的值为一段较长的字符串,而后续去请求的请求头中都需要带上这个token作为参数,否则就提示 ...

  6. 【面试普通人VS高手系列】谈谈你对Seata的理解

    很多面试官都喜欢问一些"谈谈你对xxx技术的理解". 大家遇到这种问题时,是不是完全不知道从何说起. 那么我们来看一下,普通人和高手是如何回答这个问题的? 普通人: Seata是用 ...

  7. Java学习day27

    今天跟着做了一个模拟龟兔赛跑的程序 只有一条赛道,乌龟和兔子在同一条赛道上比赛,使用了多线程 为了实现兔子睡觉,在run方法内增加了当前奔跑者是否是兔子的判断且当前奔跑步数是否是10的整数倍的判断,如 ...

  8. 全国省市区县和乡镇街道行政区划矢量边界坐标经纬度地图最新数据免费下载 支持shp geojson json sql格式

    关键词: 省市区三级, 乡镇四级, 全国, 行政区划, 坐标边界, 矢量数据, 地理围栏, 免费下载, 2018 2019 2020 2021 2022年份, 最新数据, 长期更新, 开源维护, 支持 ...

  9. Blazor Bootstrap 组件库语音组件介绍

    Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...

  10. JavaScript基础第02天笔记

    JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...