vue 前端导出PDF文件学起来

首先用 npm 引入 pdf 需要的依赖，之后需要进行二次封装，才能应用

npm install html2canvas
npm install jspdf

---------------------------------------------------------------------------------------------------------

自己找一个地方创建一个 js 文件，名字自己取，然后把下面这些东西复制进去。请务必看注意的点位，有一块注释很重要，dom 节点获取的位置

// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
var imgw = 40; var imgh = 40
function addWaterMark(doc) {var totalPages = doc.internal.getNumberOfPages();for (var i = 1; i <= totalPages; i++) {doc.setPage(i);// doc.addImage("/prod-api/file/download/50ff2b9c-76ab-4625-93e3-54aac3ac990b", 'PNG', 0 , 0 , 210, 297);doc.addImage(require("../assets/logo/watermark.png"), 'PNG', 0 , 0 , 210, 297);// doc.setTextColor(150);// doc.text(50, doc.internal.pageSize.height - 30, 'Watermark');}return doc;}
export default {install (Vue, options) {Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) { //注意：这里建立了方法名字（ExportSavePdf）,Vue.prototype 代表着通过 vue 来加载应用这个方法。下面的全局注册这个文件意思就是说可以将这个方法在 vue项目的全局中应用var element = document.getElementById("pdfCentent") //特别注意：这个id很重要，需要在页面应用到这个id。html2canvas(element, {logging: false,dpi: 120, // 图片清晰度问题useCORS:true, // 支持跨域打印图片}).then(function (canvas) {var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向var ctx = canvas.getContext("2d")var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度var renderedHeight = 0while (renderedHeight < canvas.height) {var page = document.createElement("canvas")page.width = canvas.widthpage.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距renderedHeight += imgHeightif (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页// delete page;}pdf = addWaterMark(pdf);pdf.save(htmlTitle + currentTime)})}}
}

------------------------------------------------------------------------------------------------------------------

main。js 全局挂载 / 可以自行选择，或者通过局部挂载

// 导出为pdf
import htmlToPdf from "@/utils/htmlToPdf" //注意，这里的路径是我本地的路径，需要自行应用，请不要随便复制进去导致报错
Vue.use(htmlToPdf)

--------------------------------------------------------------------------------------------------

<div id="pdfCentent"> //注意：这里的id 对应了 pdf.js 文件里的id，只有id相对应了并且调用了方法才能生成PDF文件。这个 id 可以放在需要生成pdf的根节点。和 window.print() 方法类似，对id所属底下的内容生成pdf 内容
</div>

----------------------------------------------------------------------------------------------------

//你只需要负责把这个丢在需要调用的地方即可。例如：列表请求（需要放在table数据接受和total之后）/created/mounted 里面，this.$nextTick(() => {const loading = this.$loading({});setTimeout(() => {this.ExportSavePdf("这是PDF文件的名字", "");loading.close();}, 500);});

vue 前端导出PDF文件学起来相关推荐

Vue解决导出pdf文件图片展示不全问题
摘要:我们在开发过程中经常会碰见pdf导出不全的问题,今天我就来分享两个简单粗暴的方法,大家可以尝试一下说个偷懒的办法,直接调用window.print() 方法就可以开启浏览器自带的打印功能. 如 ...
前端（vue）导出pdf
纯前端导出 pdf 实现方法如下: 1. 安装 html2pdf.jspdf npm install html2canvas jspdf --save 2. 项目 utils 文件夹中新建一个 htm ...
SpringBoot+Vue+mybatis生成pdf文件（表头跟页码，适应上传linux服务器后的操作）
SpringBoot+Vue+mybatis生成pdf文件(表头跟页码,适应上传linux服务器后的操作) 为什么使用后端去生成说明依赖后端目录控制器代码模板代码前端代碼最終效果为什么 ...
前端生成PDF 文件教程+在线demo案例
个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨 ...
c 将html导出pdf文件,将HTML页面转换为PDF文件并导出
目碎前整要们开自近事端个广的的带近事端个广前,在大多数的管理系统中,都会有这样一个功能:根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为PDF文件.本文只展现生成可视化报表之后导出PDF文 ...
pdfmake支持html,pdfMake前端导出pdf
pdfMake前端导出pdf 目前导出PDF还是后端(或nodejs)比较好. (如果没有必要) 导出方案后端: IText,wkhtmltopdf...等等. 前端: jsPdf,pdfKit,r ...
前端生成PDF文件实现方案
一.技术选型 1.html转换成canvas后生成图片导出pdf(本文选用) html转canvas插件:html2canvas是一款将HTML代码转换成Canvas的插件: canvas生成pdf: ...
PHP中使用mpdf 导出PDF文件的实现方法
mPDF是一个很强大的PDF生成库,能基本兼容HTML标签和CSS3样式,这篇文章通过实例代码给大家介绍PHP中使用mpdf 导出PDF文件的实现方法. 具体代码如下所示: ? 1 2 3 4 5 6 ...
vue页面导出pdf
vue页面导出pdf 下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.j ...

vue 前端导出PDF文件学起来

vue 前端导出PDF文件学起来相关推荐

最新文章

热门文章