前端html页面转成pdf格式并下载

Posted 2023-05-17

参考技术A

目的： 前端将页面导出为pdf格式，主要用到 html2canvas 、 jspdf 两个插件，其实 html2canvas 这个插件就相当于将屏幕‘截’了一张图，当然也并不是真正的截图，通过遍历dom生成，所以其实就是张图片，虽然方法好用方便，但是也有一定的缺陷，那就是导出的pdf无法复制里面的内容。

​ react

如何将 HTML 页面的一部分转成 PDF

1、用浏览器转换

这个方法是最简单、高效的，安装了360浏览器或者火狐及Chrome谷歌浏览器就可以轻松实现。以360浏览器为例，在浏览器的右上角点击“文件”按钮，如下图：

　　

然后选择“打印”，然后选择另存为PDF就可以了，如下图所示：

　

选择目标另存为PDF，这个是将整个网页转换成PDF文件的，有时网页很长可能会有2、3页的PDF。目前上面演示的这个功能可以在所有给予Chrome内核的浏览器中实现，包括360、搜狗极速版、Chrome、捷豹浏览器，而且操作上基本都一样。但IE内核就没有这个功能，而火狐里面则方法不同，不过肯定有插件可以实现。

2、在线转换

在线转换就是你打开一个网址，在里面可以输入你想要转换成PDF的网址，然后那个网站会自动帮你转换，然后下载到你电脑中。目前这方面的在线转换工具有很多，百度搜索了一下就能找到

可以将网页转换为PDF。只要输入网址，并击中转换!不需要注册，在输入框中输入要转换的网页网址，然后点击后面的“Convert!”，稍等片刻后就可以点击输入框下面的下载链接将转换的PDF文件下载到电脑中了，很方便。

参考技术A

转换PDF文件需要用到其他工具，

这里介绍旋转页面，多学一种技巧。 

多学一个技巧还是挺好的，这样就能轻松解决上班了。

参考技术B 装一个福昕阅读器，然后再要保存为PDF格式的网页空白处点击右键，然后选择打印，打印的时候保存为pdf格式即可，如下是本网页保存的pdf文件： 参考技术C 如果你使用chrome预览，就比较简单了。 点打印-目标-选本地另存为pdf即可。
其它的浏览器如IE的，请安装Adobe Acrobat XI Pro软件，用Adobe PDF打印机打印你要输出的内容，即可得到PDF文档。本回答被提问者采纳 参考技术D 建议你用google的chrome浏览器打开html文件。
如果你使用chrome预览，就比较简单了。 点打印-目标-选本地另存为pdf即可。
望采纳！
如果你还是不会，给我留言我在线教你！