解决html2canvas.js和pdf.js导出页面问题
写这篇文章也是记录下在集成过程中遇到的问题和如何解决这些问题的。
首先导入这两个插件:
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
其次是导出代码:
html部分:
<div id="rightMain">
<button onclick="exportHtml('rightMain');">导出HTM为pdf</button>
<div style="font-size: 20px;color:red">55555</div>
<div style="padding: 20px;background:#17c5b3;">0000001</div>
<div id="v2">
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<div>99999</div>
<div>78787</div>
...
</div>
js部分:
function exportHtml(id) {
//下载pdf方法
let demo = document.getElementById(id);
demo.style.overflow = 'visible';
html2canvas(demo, {
allowTaint: true, //允许跨域
height: document.getElementById(id).scrollHeight, //
width: document.getElementById(id).scrollWidth, //为了使横向滚动条的内容全部展示,这里必须指定
background: "#FFFFFF", //如果指定的div没有设置背景色会默认成黑色
dpi: 300,
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
// scale: window.devicePixelRatio,
onrendered: function (canvas) {
let pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向
let ctx = canvas.getContext('2d'),
a4w = 190,
a4h = 277, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度
renderedHeight = 0; while (renderedHeight < canvas.height) {
let page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(
imgHeight, canvas.height - renderedHeight)), 0, 0);
pdf.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height /
page.width)); //添加图像到页面,保留10mm边距
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容,添加一个空页
}
pdf.save('测试.pdf');
}
})
demo.style.overflow = 'auto';
}
最后看下优化后的内容:

解决html2canvas.js和pdf.js导出页面问题的更多相关文章
- 在线阅读PDF文件js插件——pdf.js
最近接到一个需求大致是这样的,要求在移动端和pc端能够在线阅读pdf文件,类似百度文库的功能. 首先想到的就是插件,github(全球最大的男性交友网站- -恩)上一大堆啊,首先找到一个PDFobje ...
- PDFObject.js、jquerymedia.js、pdf.js的对比
由于在做手机项目中需要用到预览pdf文件的需求,一搜还真多,试用后发现兼容性不是很好,大多需要浏览器对pdf阅读的支持: 如果你只是想不依赖浏览器本身对pdf解析的情况下,在手机展示pdf文件,就需要 ...
- 使用pdf.js实现前端页面预览pdf文档,解决了跨域请求
pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析 官网地址:http://mozilla.github.io/pdf.js/ 下 ...
- PDF.js 分片下载的介绍2:分片下载demo
上一个章节,简要说了以下分片下载的几个特性.今天主要用示例说明一下pdf.js分片下载. 服务器环境: php7.2 nginx 1.14 ubuntu 18.04测试浏览器:谷歌浏览器 70.0.3 ...
- pdf转为html查看pdf.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载
使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...
- JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
1.资源文件或依赖 <script type="text/javascript" src="./js/canvg2.js"></script& ...
- js实现pdf对页面的打印
//-------------------------------点击打印的图标--------------------------------- <div class="dcsc&q ...
- base64编码后的pdf文件前端页面展示--pdf.js的应用
最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...
- 利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能)
我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址 http://pan.bai ...
随机推荐
- mysql数据库(字段约束条件)
什么是字段约束 字段约束就是将字段的内容定一个规则,我们要按照规则办事 约束 描述 关键字 非空约束 限制该字段的数据不能为null not null 唯一约束 保证该字段的所有数据都是唯一.不重复的 ...
- TiDB上百T数据拆分实践
背景 提高TiDB可用性,需要把多点已有上百T TiDB集群拆分出2套 挑战 1.现有需要拆分的12套TiDB集群的版本多(4.0.9.5.1.1.5.1.2都有),每个版本拆分方法存在不一样 2.其 ...
- 分享一个自己项目中用到的.net中正则替换工具处理类(支持先用特征匹配内容整体模板,同时模板内对相关字内容进行替换)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- MongoDB分片副本集生产环境部署-Windows版本
title: MongoDB分片副本集生产环境部署(Windows版本) date: 2022-10-29 17:21:11 tags: - 运维 系统架构 配置环境 系统都是windows 10 专 ...
- Spring框架初学习
Spring框架初学习 摘要:今天我终于开始学习大名鼎鼎的Spring框架了,在上大学的时候,经常看见一些课设大佬Spring,Spring的,什么Spring boot,Spring MVC的, ...
- 题解CF893C Rumor
思路 竟然朋友之间可以传递故事,那么,我们设两两有间接或直接的朋友关系的为一个友好集合,那么我们只要每一个友好集合买一次就好了. 那应该怎么买呢?由于题面让我们求的是[最少的价钱],那我们可以考虑每一 ...
- rvm安装ruby
macOS11.1 打开终端 使用下面命令查看ruby版本 rvm list known 然后安装 rvm install 2.0.0 查看ruby版本 ruby -v 系统默认使用ruby版本 ...
- vue 中引入iframe,动态设置其src,遇到的一些小问题总结
1.重置其样式,去掉外框以及滚动条等 <iframe id="myIframe" ref="iframe_a" :src="mySrc" ...
- 分布式协议与算法-Raft算法
本文总结自:极客时间韩健老师的分布式协议与算法实战课程. 大家都知道,Raft算法属于Multi-Paxos算法,它是在Multi-Paxos思想的基础上,做了一些简化和限制.关于Paxos算法,博主 ...
- C#如何提高代码质量(一)
代码部分 1.正确操作字符串 尽量少装箱 String str1 = "str2"+9.ToString(); 避免分配额外的内存空间 StringBuilder 2.使用默认转型 ...