JS 如何将 HTML 页面导出为 PDF
来源:互联网 发布:php get 参数隐藏 编辑:程序博客网 时间:2024/06/05 04:15
好久没在CSDN写博客了,因为都放在了个人网站了哈
我这里有个需求,就是前端添加个按钮,提供HTML页面导出为PDF的功能。
我谷歌了好久(难道是我谷歌的方式不对 (ˉ▽ˉ;)…),找到的答案大都推荐 jsPDF + html2canvas 的方式。
参考了这两个开源项目的文档,自己写,失败,导出的pdf是空的。
参考 stackoverflow 代码,同样失败,同样只导出空白的pdf,他们咋成功了?
好了,以上都是废话,只是说明了我找答案的艰辛之旅。
源码在这里 https://github.com/pwcong/how-transform-html-into-pdf
栗子
准备
创建项目文件夹,npm构建怎样都行,我这里简单直接引入两个库 jspdf 和 html2canvas,大家可以自行下载。
新建HTML页面文件
头部引入刚才所下载的 jspdf
和 html2canvas
,再导入主要的 js 文件例如:
<script src="/js/jspdf.debug.js"></script><script src="/js/html2canvas.js"></script><script src="/main.js"></script>
页面里面内容自己想怎么写就怎么写啦,提供一个按钮来触发导出pdf的功能,例如:
<button id="btn-html2canvas">export PDF by using jspdf + html2canvas</button>
编辑 main.js
document.getElementById("btn-html2canvas").onclick = function(){ html2canvas(document.getElementById("content"), { onrendered: function(canvas) { //通过html2canvas将html渲染成canvas,然后获取图片数据 var imgData = canvas.toDataURL('image/jpeg'); //初始化pdf,设置相应格式 var doc = new jsPDF("p", "mm", "a4"); //这里设置的是a4纸张尺寸 doc.addImage(imgData, 'JPEG', 0, 0,210,297); //输出保存命名为content的pdf doc.save('content.pdf'); } });}
这里要特别注意
canvas.toDataURL('image/jpeg)
的参数image/jpeg
和doc.addImage(...,'JPEG',...)
的参数JPEG
务必一致
而且,我也建议这两个参数分别写image/jpeg
和JPEG
。
因为其他参数例如image/png
等,导出pdf后内容为空。
这也是困扰了我一天的问题。(我猜测因为html2canvas输出的图片base64数据是image/jpeg格式,如果写其他格式会导致渲染失败)
添加到服务器中浏览器访问,测试html导出为pdf是否成功,总之博主成功了。
- JS 如何将 HTML 页面导出为 PDF
- JS 如何将 HTML 页面导出为多页 PDF
- 将HTML页面部分内容导出为PDF
- IE下用JavaScript将HTML导出为Word、Pdf
- CSDN博客导出(三) - 将HTML转换为PDF
- CSDN博客导出(三) - 将HTML转换为PDF
- IE下用JavaScript将HTML导出为Word、Pdf
- 如何将头部html和尾部html转换为js,并加载到每个页面中
- 利用TCPDF将html页面转换为PDF格式
- 网站开发进阶(二十五)js如何将html表格导出为excel文件
- 网站开发进阶(三十一)js如何将html表格导出为excel文件(后记)
- Drupal7 当中如何将book导出为pdf/word
- 如何将FusionCharts图表导出为图像/PDF
- 将DataGridView导出为PDF
- 如何将ipynb转换为html,md,pdf等格式
- 如何将PDF文件页面转换为图片
- 利用js将html表格导出为excel文件
- 使用js将页面导出为word的简洁方法
- JavaBean在JSP中的应用
- (转帖)CentOS最常用命令及快捷键整理
- HTTP 头部解释,HTTP 头部详细分析,最全HTTP头部信息
- buildMaven
- 每日F&Q(2017.2.21)
- JS 如何将 HTML 页面导出为 PDF
- 第七章 快速排序
- configure 中常见的几个命令
- Nginx搭建HTTP正向代理服务器
- POJ 1182
- Xposed框架的检测
- 289. Game of Life
- Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
- Es6入门之块级作用域