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

本文介绍了一种使用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.点击下载便保存到本地

在UniApp打包的Android应用中,想要在当前页面打开本地PDF文件,你需要遵循以下步骤: 1. **权限申请**:确保你的AndroidManifest.xml文件中已经添加了读取外部存储权限(<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />)。在运行前,用户可能需要在系统的权限管理界面授予这个权限。 2. **文件路径获取**:获取到PDF文件的实际路径,这通常是通过`uni.getStorageSync`或`uni.fileSystem.readFile`等方法从本地缓存或文件系统获取。 ```javascript let filePath = uni.getStorageSync('pdfFilePath'); ``` 3. **使用PDF查看器插件**:UniApp提供了一些第三方插件用于预览PDF,例如`vue-pdf-viewer`或者`@unipager/plugin-pdf-viewer`。安装插件后,在页面组件中使用它来加载PDF。 ```html <template> <uni-pdf-viewer :src="filePath"></uni-pdf-viewer> </template> <script> import PDFViewer from '@unipager/plugin-pdf-viewer'; export default { components: { PDFViewer }, data() { return { filePath: '' } }, created() { this.filePath = uni.getStorageSync('pdfFilePath'); } } </script> ``` 4. **处理异常**:确保处理可能出现的文件路径不存在或者权限不足的情况,以免影响用户体验。 ```javascript created() { try { this.filePath = uni.getStorageSync('pdfFilePath'); if (!this.filePath) { // 文件路径为空或找不到文件,提示用户处理 console.error('File not found'); } else { this.$refs.pdfViewer.src = this.filePath; } } catch (err) { console.error('Permission error', err); } }, ``` 注意:以上代码示例仅供参考,具体的实现可能会因为版本更新或插件的不同而有所差异。记得在实际项目中测试并遵循官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值