Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

文章目录

    • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)
      • 一、背景介绍
      • 二、疑问
      • 三、所使用技术
        • html2canvas+jspdf
      • 四、展示开始
        • 1、效果展示
        • 2、代码部分
        • 3、参数说明
          • 3.1、html2canvas常用参数
          • 3.2、jsPDF常用参数
      • 五、常见问题

一、背景介绍

​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。

二、疑问

1、为什么要使用html2canvas,单jspdf也能实现pdf下载?

​ HTML2Canvas 和 jsPDF 是 JavaScript 库,用于在浏览器中生成 PDF 文件。

​ HTML2Canvas 用于将 HTML 元素渲染成图像,可以将整个页面或特定区域以图像形式进行捕获。这对于将复杂的 HTML 结构转换为 PDF 格式非常有用,因为它可以捕获 HTML 中的样式、布局和图像等细节。 jsPDF 是一个 PDF 生成库,它允许你通过 JavaScript 代码创建和编辑 PDF 文档。与 HTML2Canvas 结合使用,你可以将 HTML 元素渲染成图像,然后将图像插入到 jsPDF 创建的 PDF 文档中。 虽然单独使用 jsPDF 也可以实现 PDF 下载,但是在某些情况下,使用 HTML2Canvas 可能更方便。例如,当你需要将整个页面转换为 PDF 或以图像形式捕获特定区域时,HTML2Canvas 提供了更灵活的选项。然后,你可以将 HTML2Canvas 生成的图像插入到 jsPDF 中,进一步编辑和操作 PDF。 综上所述,使用 HTML2Canvas 结合 jsPDF 可以更容易地将 HTML 转换为 PDF,并提供更多灵活性和控制力。

三、所使用技术

html2canvas+jspdf

js引入:引入线上js直接使用

<!--pdf下载 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<!--jquery 方便后续使用jquery原生函数,可不引入-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

四、展示开始

1、效果展示

html页面

在这里插入图片描述

下载成PDF

在这里插入图片描述

2、代码部分

js引入:

<!--pdf下载 -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<!--jquery 方便后续使用jquery原生函数,可不引入-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

整体流程:

  1. 先将页面通过html2canvas转换成图片
  2. (jsPDF)将转换成的图片导出成PDF的形式
<!--pdf下载 -->
<script src="assets/js/jspdf/html2canvas.js"></script>
<script src="assets/js/jspdf/jspdf.umd.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>$('#downloadPDF').click(function() {console.log('开始下载PDF');htmlToPdf();});function htmlToPdf() {// 获取HTML元素const element = document.getElementById("layout-wrapper");const options = {dpi: 192,  //dpi属性的值为192,表示图像的分辨率scale: 2, //scale属性的值为2,表示图像的缩放比例。backgroundColor: "#F1F6FE"  //backgroundColor属性的值为"#F1F6FE",表示图像的背景颜色。};// 将元素转换为canvas对象html2canvas(element, options).then((canvas) => {var contentWidth = canvas.width;   //获取Canvas(上面元素id 'layout-wrapper')对象的宽度var contentHeight = canvas.height; //获取Canvas(上面元素id 'layout-wrapper')对象的高度// 创建jsPDF对象	jsPDF = jspdf.jsPDF;  //导入jsPDF库,用于创建PDF文件const pdf = new jsPDF('1', 'pt', [contentWidth, contentHeight]); //创建一个新的PDF对象,参数包括页面格式('1'表示A4纸张)、单位('pt')和页面尺寸([contentWidth, contentHeight])var pageData = canvas.toDataURL('image/jpeg', 1.0);  //将Canvas对象转换为JPEG格式的数据,并将其存储在pageData变量中。1.0表示图片质量pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);  //将JPEG格式的图片添加到PDF文件中,图片的左上角坐标为(0, 0),宽度为contentWidth,高度为contentHeightpdf.save("test.pdf");});}
</script>

在这里插入图片描述

3、参数说明
3.1、html2canvas常用参数

html2canvas 函数接受一些常用的参数,用于配置转换后的 canvas 元素的行为和样式。以下是一些常用的参数:

  • element: 必需参数,表示需要转换为 canvas 的 HTML 元素。
  • widthheight: 可选参数,分别表示转换后的 canvas 元素的宽度和高度。如果不设置这些参数,则 canvas 元素会自动调整大小以适应所包含的 HTML 元素。
  • scale: 可选参数,表示 canvas 元素的比例。默认值为 1,表示 canvas 元素会保持原始大小。
  • border: 可选参数,表示 canvas 元素的边框宽度。默认值为 0,表示没有边框。
  • backgroundColor: 可选参数,表示 canvas 元素的背景颜色。默认值为 “#ffffff”,表示白色。
  • foregroundColor: 可选参数,表示 canvas 元素的前景色颜色。默认值为 “#000000”,表示黑色。
  • imageQuality: 可选参数,表示转换后的图像的质量。默认值为 1,表示高质量。
  • jsPDF: 可选参数,表示需要使用的 jsPDF 对象。如果不设置这个参数,则不会将 canvas 转换为 PDF 文件。

以下是一个使用 html2canvas 函数的示例,其中包含了上述参数:

html2canvas(document.getElementById("my-element"), {width: 800,height: 600,scale: 2,border: 1,backgroundColor: "#cccccc",foregroundColor: "#000000",imageQuality: 0.9,jsPDF: pdf
}).then(function(canvas) {// 处理转换后的 canvas 元素
});
3.2、jsPDF常用参数

jsPDF 是一个用于创建 PDF 文件的 JavaScript 库。以下是 jsPDF 常用的参数:

  1. jsPDF('1', 'pt', [width, height]): 创建一个新的 PDF 对象,其中 '1' 表示 A4 纸张(l:竖向,p:横向),'pt' 表示单位为 point,widthheight 分别表示页面宽度和高度。
  2. pdf.setFont(font, size): 设置 PDF 文件的字体和大小。其中 font 表示字体名称,如 'Helvetica''Times'size 表示字体大小。
  3. pdf.setLineWidth(width): 设置 PDF 文件的线宽。其中 width 表示线宽的像素值。
  4. pdf.drawLine(x1, y1, x2, y2): 在 PDF 文件中绘制一条直线。其中 x1y1x2y2 分别表示直线的起点和终点坐标。
  5. pdf.drawRect(x, y, width, height): 在 PDF 文件中绘制一个矩形。其中 xy 分别表示矩形左上角的坐标,widthheight 分别表示矩形的宽度和高度。
  6. pdf.drawText(text, x, y): 在 PDF 文件中绘制一段文本。其中 text 表示要绘制的文本,xy 分别表示文本的左上角坐标。
  7. pdf.save('filename.pdf'): 将 PDF 文件保存为指定的文件名。其中 'filename.pdf' 表示要保存的 PDF 文件的文件名。
  8. pdf.addImage(imageData, type, x, y, width, height): 在 PDF 文件中添加一个图像。其中 imageData 表示图像的数据,type 表示图像的类型,如 'JPEG''PNG'xy 分别表示图像左上角的坐标,widthheight 分别表示图像的宽度和高度。
  9. pdf.rotate(angle, x, y): 旋转 PDF 文件中的图像或文本。其中 angle 表示旋转的角度,xy 分别表示旋转中心的位置。
  10. pdf.translate(x, y): 将 PDF 文件中的文本或图像移动到指定位置。其中 xy 分别表示要移动的坐标。

五、常见问题

1、图片跨域

解决方案:

  • 设置配置项 allowTaint: false

    canvas 的 CanvasRenderingContext2D 属于浏览器的对象,如果渲染过跨域资源,浏览器就认定 canvas 已经被污染了 Taint:污点

  • 设置配置项 useCORS: false

    表示允许跨域资源共享,注意不能与 allowTaint 同时配置为 true

  • img 标签中添加 crossOrigin = "anonymous"

    anonymous:如果使用这个值的话就会在请求 header 中带上 Origin 属性,但请求不会带上 cookie 和客户端 ssl 证书等其他的一些认证信息

  • 图片服务器配置 Access-Control-Allow-Origin: *

    重要的配置项,是跨域问题的根本源泉,需要后端配合

2、截图锯齿

解决方案:根据设备像素比进行缩放

// 设置放大倍数
const scale = window.devicePixelRatio;

4、对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

解决方案:

对于一些必要的样式,可以选择使用图片做兜底实现

box-shadow 可以参考 这个pr,修改源码解决,但是,实际效果也不是太理想……

5、svg 标签

问题原因:vue-lottie 动画库渲染的标签是 svg(也可能是你自己写的 svg 标签)

html2canvas 对于 svg 标签的支持也不尽人意,解决办法同样是用图片做兜底

在项目中,我们是用 svg 做动画,截图的时候把动画换成一张静态图,这样只要设置要静态图的样式,截图效果还是可以接受的

想……

5、svg 标签

问题原因:vue-lottie 动画库渲染的标签是 svg(也可能是你自己写的 svg 标签)

html2canvas 对于 svg 标签的支持也不尽人意,解决办法同样是用图片做兜底

在项目中,我们是用 svg 做动画,截图的时候把动画换成一张静态图,这样只要设置要静态图的样式,截图效果还是可以接受的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/212876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言----文件操作(一)

一&#xff1a;C语言中文件的概念 对于文件想必大家都很熟悉&#xff0c;无论在windows上还是Linux中&#xff0c;我们用文件去存储资料&#xff0c;记录笔记&#xff0c;常见的如txt文件&#xff0c;word文档&#xff0c;log文件等。那么&#xff0c;在C语言中文件是什么样的存…

threadpool github线程池学习

参考项目 https://github.com/progschj/ThreadPool 源码分析 // 常规头文件保护宏, 避免重复 include #ifndef THREAD_POOL_H #define THREAD_POOL_H// 线程池, 存储线程对象; #include <vector>// 任务队列, 双向都可操作队列, queue 不能删除首个元素 #include <…

微信小程序制作-背单词的小程序制作

微信小程序–背单词的 好久没有发过文章了&#xff0c;但是不代表着我不去学习了喽&#xff0c;以下是我最近做的东西&#xff0c;前端的UI由朋友设计的&#xff0c;目前这个是前端使用的是微信小程序后端是Python的一个轻量型框架&#xff0c;FastApi&#xff0c;嗯&#xff…

MyBatis 四大核心组件之 Executor 源码解析

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

List 接口

1 List 接口 java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。 List是一种常用的集合类型&#xff0c;它可以存储任意类型的对象&#xff0c;也可以结合泛型来存储具体的类型对象&#xff0c;本质上就是一个容器。 1.1 List 类型介绍 有序性…

06-React组件 Redux React-Redux

React组件化&#xff08;以Ant-Design为例&#xff09; 组件化编程&#xff0c;只需要去安装好对应的组件&#xff0c;然后通过各式各样的组件引入&#xff0c;实现快速开发 我们这里学习的是 Ant-design &#xff08;应该是这样&#xff09;&#xff0c;它有很多的组件供我们…

计算机网络测试题第二部分

前言:如果没有做在线测试请自主独立完成&#xff0c;本篇文章只作为学习计算机网络的参考&#xff0c;题库中的题存在一定错误和不完整&#xff0c;请学习时&#xff0c;查找多方书籍论证&#xff0c;独立思考&#xff0c;如果存在疑虑可以评论区讨论。查看时&#xff0c;请分清…

pytorch debug 常用工具

自动辨识图像格式可视化 import numpy as np import matplotlib.pyplot as plt from PIL import Imagedef convert_to_numpy(image_input):"""自动检测输入图像类型&#xff0c;并将其转换为NumPy数组。"""if isinstance(image_input, np.ndarr…

7-3 Left-pad

根据新浪微博上的消息&#xff0c;有一位开发者不满NPM&#xff08;Node Package Manager&#xff09;的做法&#xff0c;收回了自己的开源代码&#xff0c;其中包括一个叫left-pad的模块&#xff0c;就是这个模块把javascript里面的React/Babel干瘫痪了。这是个什么样的模块&a…

物联网IC

物联网IC 电子元器件百科 文章目录 物联网IC前言一、物联网IC是什么二、物联网IC的类别三、物联网IC的应用实例四、物联网IC的作用原理总结前言 物联网IC的功能和特性可以根据不同的物联网应用需求来选择和配置,以满足物联网设备在连接、通信、感知和控制方面的需求。 一、物…

猜数字游戏Ⅱ

你和朋友一起玩猜数字游戏&#xff0c;你写出一个秘密数字&#xff0c;请朋友猜这个数字是多少。朋友每猜测一次&#xff0c;你就会给他一个包含下述信息的提示&#xff1a; 猜测数字中有多少位属于数字和确切位置都猜对了&#xff08;称为 "Bulls"&#xff0c;公牛&…

VOL-vue 框架 文件上传控件关于大文件上传等待的修改

我的项目在测试voltable列表组件中对阿里云OSS做附件上传时&#xff0c;几十M的文件可能就会需要一段时间来上传&#xff0c;才能有OSS的状态和链接返回。 但是控件VolUpload.vue并没有去在这方面做任何交互体验上的控制&#xff0c;而且VolUpload.vue本身写的几个上传函数都是…

SpringBoo在项目停止(服务停止/关闭退出)之后执行的方法

SpringBoo在项目停止/服务停止/关闭退出之后执行的方法 1.实现DisposableBean接口2.使用PreDestroy注解 SpringApplication会向JVM注册一个关闭钩子(hook)&#xff0c;以确保ApplicationContext在退出时正常关闭。 可以使用所有标准的Spring生命周期回调&#xff08;例如Dispos…

内测分发是什么?十年的前端开发者带你了解

内测分发是软件开发过程中的一个阶段&#xff0c;特别指软件还未完全完成或准备对外广泛发布前&#xff0c;向一定范围的用户群体提供该软件版本的测试机会&#xff0c;以便收集反馈和修复潜在的问题。在讲解内测分发之前&#xff0c;我们需要明确几个相关概念&#xff1a; 软件…

区块链媒体宣发:揭示优势与趋势,引领信息传播新时代

在数字化潮流中&#xff0c;区块链技术正以惊人的速度改变着传媒行业的格局。从区块链媒体宣发中获得的种种优势和未来的趋势&#xff0c;不仅为企业带来了新的推广途径&#xff0c;也在信息传播领域掀起了一场革命。本文将深入探讨区块链媒体宣发的优势以及未来的发展趋势。 1…

排序算法---选择排序

1.实现流程&#xff1a; 1. 把第一个没有排序过的元素设置为最小值&#xff1b; 2. 遍历每个没有排序过的元素&#xff1b; 3. 如果元素 < 现在的最小值&#xff1b; 4. 将此元素设置成为新的最小值&#xff1b; 5. 将最小值和第一个没有排序过的位置交换 选择排序执行流程…

初识Ceph --组件、存储类型、存储原理

目录 ceph组件存储类型块存储文件存储对象存储 存储过程 ceph Ceph&#xff08;分布式存储系统&#xff09;是一个开源的分布式存储系统&#xff0c;设计用于提供高性能、高可靠性和可扩展性的存储服务&#xff0c;可以避免单点故障&#xff0c;支持块存储、对象存储以及文件系…

【小白专用】Apache2.4+PHP8.3+MYSQL的配置

1.下载PHP和Apache 1、PHP下载 PHP For Windows: Binaries and sources Releases 注意&#xff1a; 1.使用Apache作为服务器的话&#xff0c;一定要下载Thread Safe的&#xff0c;否则没有php8apache2_4.dll这个文件&#xff0c; 如果使用IIS的请下载 NON Tread safe的 2.如果…

USB连接器

USB连接器 电子元器件百科 文章目录 USB连接器前言一、USB连接器是什么二、USB连接器的类别三、USB连接器的应用实例四、USB连接器的作用原理总结前言 USB连接器的使用广泛,几乎所有现代电子设备都具备USB接口,使得设备之间的数据传输和充电变得简单和便捷。 一、USB连接器是…

element-ui按钮el-button,点击之后恢复之前的颜色

在开发过程中, 使用el-button 按钮点击之后, 没有恢复到之前的颜色, 还是保持点击之后的颜色,需要解决这个问题, <template><div><el-button size"mini" type"primary" plain click"onClick($event)">按钮</el-button>…