关于jsPDF的分页、实际宽度高度、中文乱码、IE兼容、domToImage、html2canvas记录填坑

最新推荐文章于 2024-08-16 19:09:54 发布
最新推荐文章于 2024-08-16 19:09:54 发布
阅读量1.2w 收藏 5
点赞数 1
分类专栏： Javascript 文章标签： 开发记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongyu_789/article/details/80494156
版权
本文记录了使用jsPDF进行PDF导出过程中遇到的问题，包括自动分页、实际宽度高度计算、中文乱码、IE浏览器兼容性以及如何将DOM转换为PDF。在解决中文乱码时，需要添加自定义字体。对于长页面，addHtml方法由于使用html2canvas导致失真，而fromHtml虽能自动分页但不支持中文。最终选择了addImage方法并比较了html2canvas和domtoimage，后者虽然能处理长页面但不支持IE。
摘要由CSDN通过智能技术生成

最近接手了一个web项目改造，对弹窗进行导出PDF，而且弹窗可能还会有滚动。

要求原样导出，一开始就没考虑后台导出太傻，JS这么强大。

jsPDF符合要求，官网：https://parall.ax/products/jspdf，有几个sample还可以。

以下是几个主要方法和槽点

addHtml：支持dom的导出PDF，不过分辨率差很多很失真且不支持自动分页只会截取当页显示内容，应该是内部使用html2canvas方法转换图片的坑。

fromHtml：支持长页面的自动分页，不过不支持中文哭，去jsPdf在github相关issues，有提示说要自己添加字体ttf,

addImage: 添加图片自己定义，最后采用这个

最低0.47元/天 解锁文章
柴知道
关注
专栏目录
（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
c1007857613的专栏
05-30 1869
jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
05-06
html2canvas的依赖包，复制放在node_modules中
完美解决html2canvas + jsPDF导出pdf分页内容截断问题
最新发布
weixin_45821809的博客
08-16 2047
完美解决html2canvas + jsPDF导出pdf分页内容截断问题
pdf.js pdf在线预览组件，支持IE,chrome
12-11
pdf.js pdf在线预览组件，支持IE,chrome多个浏览器，支持下载、打印功能。
导出pdf,自动分页
Sk22582的博客
06-15 1429
在修改后的代码中，我们首先定义了 A4 纸的宽度和高度，然后创建了一个 A4 尺寸的 PDF 实例。接着，我们在 generatePDF 函数中判断当前页的高度是否超过 A4 高度，如果超过，则新增一页，并将 pdfHeight 重置为 0。如果总高度超过当前页面的高度，则继续滚动页面，并使用 html2canvas 生成新的 canvas，并调用 generatePDF 方法将其添加到 PDF 中，直到滚动到超出总高度为止。最后，我们使用 pdf.save 方法保存并下载 PDF 文件。
jspdf插件使用时只能下载显示部分（页面中可视区域）的问题
qq_54580397的博客
07-06 636
jspdf
设置pdf的放大缩小
weixin_42440314的博客
03-17 1441
<template> <div class="view"> <!-- <template v-for="item in pageNum" :key="item"> --> <!-- :id="`pdf-canvas-${item}`" --> <canvas id="pdf-canvas" class="pdf-page" @touchstart="touchstart"
jsPDF + html2canvas A4分页截断 完美解决方案（含代码 + 案例）
郊眠寺
09-27 1万+
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案
11-20
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，...
vue 使用html2canvas将DOM转化为图片的方法
10-18
在Web开发中，将页面上的DOM元素转换为图片是一项非常实用的功能，尤其是当你希望用户提供打印、下载或分享当前页面的某一部分时。而Vue.js作为一个流行的JavaScript框架，与html2canvas库结合起来，可以很方便地...
html2canvas.js 和jsPdf.debug.js
09-07
HTML2canvas.js与jspdf.debug.js是两个在前端开发中常用的JavaScript库，它们主要用于实现将网页内容转换为PDF的功能。这两个库的结合使用，可以让开发者在用户浏览器端直接生成PDF，而无需服务器端的支持，提高了...
html2canvas.js 和 jspdf.debug.js
10-18
HTML2canvas.js 和 jspdf.debug.js 是两个在前端开发中用于将HTML页面转换为PDF格式的JavaScript库。这两个库的结合使用可以帮助开发者实现在浏览器端无插件地将网页内容保存为PDF文档，这对于创建报告、收据或任何...
jspdf + html2canvas 开发前端pdf导出功能记录
qq_37028216的博客
11-22 879
目录 插件 实现 简单分页 进一步分页 关于html2canvas的一点小经验 最近在开发项目的时候，接到了一个需求。听起来是比较简单的，将后台系统的报表以pdf文件的形式导出。excel导出,图片导出都做过了，现在轮到pdf了。在实现的过程中遇到了一些困难，通过查阅资料，网上各位朋友使用过的经验后，差不多完成。写这篇博客希望将自己的经验留下，帮助到更多的朋友。 插件 PDF类 ...
jsPDF – 基于 HTML5 的强大 PDF 生成工具
热门推荐
阳光岛主
12-24 2万+
jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。 使用方法很简单，只要引入 jsPDF 库，然后调用内置的方法就可以了。
DOM操作中浏览器兼容问题
小码同学的博客
08-02 202
// 封装函数 // myGetStyle 获取标签样式函数 // @param object element 需要获取css样式的标签对象 // @param string style 需要获取的css样式的属性 // @return string 返回制订标签对象指定属性对应的属性值字符串 // 可以兼容低版本IEL浏览器 function myGetStyle(element,style){ if(window.getComputedStyle){ // 转化为true 证明是标准浏览器.
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
weixin_45439379的博客
01-25 5577
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能 文章目录前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现前言一、pdf展示1.文件准备2.引入3.使用二、使用步骤1.引入库2.读入数据总结 前言 前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 先看下效果图： 一、pdf展示 1.文件准备 pdfjs-dist 需要放在根目录下的static文件夹中 2.引入 3.
jsPdf前端页面直接生成Pdf盖章下载
马句
06-21 1157
前言 因为需要一个简单的pdf生成功能应付一下系统演示，所以找了个比较简单的前端页面可以直接存储当前画布里的内容导出pdf的js，当然这个也是可以通过前端代码做一些简单调整的，应付完检查肯定还是要回归后端word生成pdf的，仅记录一下。 官网地址：http://jspdf.com https://parall.ax/products/jspdf 下载地址：https://github.com/MrRio/jsPDF 引入js <script src="https://...
关于前端导出pdf的坑/html2canvas/pdf-lib/dom-to-image/jspdf
一个前端工程师
07-10 959
关于前端导出pdf的坑/html2canvas/pdf-lib/dom-to-image/jspdf，坑巨多，每个点都是坑
JS测试出最小支持字体，以及修复PDFJS的文本错误偏移
sinat_27171121的博客
11-19 1319
如果浏览器的文本缩放不是100%，而PDFJS没有检测这一点，导致文本排布发生偏移。PDFJS的文本层有时会有一个错误的整体偏移，导致文本处于错误位置，导致用户选择错误的文本。浏览器还有一个“最小支持字体”的限制，
html2canvas jspdf分页
09-11
要在HTML页面中使用html2canvas和jspdf来实现分页功能，你可以按照以下步骤进行操作： 1. 首先，将需要转换成PDF的HTML内容通过html2canvas库转换为Canvas元素。你可以使用html2canvas的`html2canvas(element)`方法...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值