前端实现PDf文件下载功能

前言：pc端需要实现生成PDF并下载的功能。

方法一：侧重点在前端，后端只需要配合把PDF所需要的数据给到前端即可。
准备工作：需要npm install 这两个插件，html2Canvas，JsPDF。
注：上面给的不是npm的命令，不可以直接当做npm命令使用

//引入import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'// 也可以在main.js文件里面引入，并把getPdf方法绑定在vue实例上，全局使用

生成PDF的容器，里面样式根据需求自行加入

<div id="pdfDom"></div>

this.getPdf('name', '#pdfDom') //这里调用，传参可自定义，但id必须有

//核心代码getPdf(name, id) {      const that = this      html2Canvas(document.querySelector(id), {        allowTaint: true,        useCORS: true, // html2Canvas生成的图片会出现跨域问题，加上此参数即可解决        scale: 2, // 提升画面质量，但是会增加文件大小        backgroundColor: '#FFFFFF', // 默认为黑色，将 background 为其他颜色      }).then(function (canvas) {        let contentWidth = canvas.width        let contentHeight = canvas.height        //一页pdf显示html页面生成的canvas高度;        let pageHeight = contentWidth / 595.28 * 841.89        //未生成pdf的html页面高度        let leftHeight = contentHeight        //页面偏移        let position = 0        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高        let imgWidth = 595.28        let imgHeight = 595.28 / contentWidth * contentHeight        let pageData = canvas.toDataURL('image/jpeg', 1.0)        let PDF = new JsPDF('', 'pt', 'a4')        if (leftHeight < pageHeight) {          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)        } else {          while (leftHeight > 0) {            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)            leftHeight -= pageHeight            position -= 841.89            //避免添加空白页            if (leftHeight > 0) {              PDF.addPage()            }          }        }        PDF.save(name + '.pdf')      })    },

注：
1.此方法原理是html2canvas将页面中选定的元素转换成图片，然后将图片插入到pdf中，所以选定元素要已经被渲染，并且可视。如上面#pdfDom的容器，给display：none；或者定位到可视窗口外，最终生成的pdf都是空白的
2.关于分页：A4纸的尺寸是595.28,841.89，当页面高度超过841.89的部分会被计入下一页。关于分页可参考Javascript 将html转成pdf,下载,支持多页
参考链接：
Javascript 将html转成pdf,下载,支持多页
前端实现网页转PDF并保存(vue方案)
html2canvas 简介及使用（踩坑）

**方法二：**侧重点在后端，后端返回PDF文件的url地址。
这里是百度出来的几个主流方法，经过自测的！！！！网上很多答案经过验证都无法完成功能。

// 此方法经过验证，会在当前页面打开PDF文件，并不会下载。因为没有去深入研究，所以具体原因，暂时未知const link = document.createElement('a')link.href = datalink.setAttribute('download', data)link.download = '购车.pdf';link.click()

隆重介绍下面这个方法

//拿到URL之后直接调用window.open方法，浏览器会下载PDF文件window.open(url,'_blank')

如果PDF未下载而是预览，需要搭配下面方法才可生效

//打开谷歌浏览器--设置--隐私与安全--网站设置--更多内容设置-- PDF文档--默认行为改成下载PDF文件即可//操作步骤见下图

注：火狐也有此问题

本文链接：https://www.kjpai.cn/news/2024-04-26/162447.html，文章来源：网络cs，作者：亙句，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！