js下载当前页面为pdf到本地

最新推荐文章于 2025-05-22 15:25:19 发布

原创最新推荐文章于 2025-05-22 15:25:19 发布 · 3.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js

工作总结专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用jsPdf和html2canvas库将网页内容转换并下载为PDF文件的方法，适用于需要将动态网页内容（包括JS和CSS）完整保存的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js下载当前页面为pdf到本地
今天在工作上遇到客户需要下载页面上的表单，本想用java传入参数在后端进行下载为html，但是下载下来的无法将js、css文件加载进去，所以考虑到直接用js在页面上直接下载的方式。
1.首先要引用两个js：jsPdf.debug.js 和html2canvas.js
2.在需要下载的表单或者div片段上加入id 例如id = “pdfDom”
在这里插入图片描述
3.在button添加点击触发事件

4.添加js片段

    <script type="text/javascript">

      function download () {
    	    if(confirm("您确认下载该PDF文件吗?")){
    	       var pdf = new jsPDF('p','pt','a4');
    	    // 设置打印比例 越大打印越小
    	       pdf.internal.scaleFactor = 2;
    	       var options = {
    	           pagesplit: true, //设置是否自动分页
    	           //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
    	          "background": '#FFFFFF'  
    	      };
    	       var printHtml = $('#pdfDom').get(0);   // 页面某一个div里面的内容，通过id获取div内容
    	       pdf.addHTML(printHtml,15, 15, options,function() {
    	          pdf.save('${ kmImissiveReceiveMainForm.docSubject}.pdf');
    	      });
    	    }
    	}
    </script>

5.点击下载便保存到本地