前端VUE完成截取当前页面转PDF，支持分页

使用html2canvas+jspdf实现，可直接复制过去用

既然是第三方的库还是要免不了的要安装，安装使用如下语句：

npm i --save html2canvas jspdf

操作方法是首先使用html2canvas将页面中选定的元素转换成图片，然后将图片插入到pdf中，接着再下载下来。
使用import导入到项目中以后就能直接使用了。

 import html2canvas from 'html2canvas'import jsPDF  from 'jspdf'

接下来看html部分，我们需要将要转为PDF的内容放置在准备好的容器里。只需要在warp中写好要相应的模版，然后先请求相关数据渲染。之后调用方法打印内容。

<div class="print"><div ref="wrap" class="wrap"><!-- 放置内容 --></div></div>

在wrap盒子内部写入需要转换的内容，接下来调用方法：

print(orderNo) {// 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载let top = this.$refs.wrap;console.log(top);if (top != null) {top.scrollIntoView();top = null;}html2canvas(this.$refs.wrap, {allowTaint: true,}).then(function (canvas) {const contentWidth = canvas.width;const contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;let pageHeight = (contentWidth / 592.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 = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);const PDF = new jsPDF("", "pt", "a4");//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页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();}}}// const pageData = canvas.toDataURL("image/jpeg", 1.0);// //p表示纵向，l表示横向，px是单位 ,[宽，长]->[x,y]// const PDF = new JsPdf("p", "px", [2550, 3100]);// PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);PDF.save(orderNo + ".pdf");});},

注：打印的时候最好给warp盒子加一些padding否则内容紧贴边缘不好看

如：顶部和两边是完全贴合边缘的

所以根据自己所需加一定内边距就好了

完整代码：页面元素更换成自己所需就好啦

<template><div class="print"><div ref="wrap" class="wrap"><div class="slip"><button @click="print">下载</button><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></div></div></div>
</template>
<style scoped>
.box {width: 100%;height: 300px;background-color: pink;
}
li {background-color: #000;
}
.wrap {/* padding: 60px; */
}
</style>
<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {name: "app",components: {},data() {return {};},mounted() {},methods: {print(orderNo) {// 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载let top = this.$refs.wrap;console.log(top);if (top != null) {top.scrollIntoView();top = null;}html2canvas(this.$refs.wrap, {allowTaint: true,}).then(function (canvas) {const contentWidth = canvas.width;const contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;let pageHeight = (contentWidth / 592.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 = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);const PDF = new jsPDF("", "pt", "a4");//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页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();}}}// const pageData = canvas.toDataURL("image/jpeg", 1.0);// //p表示纵向，l表示横向，px是单位 ,[宽，长]->[x,y]// const PDF = new JsPdf("p", "px", [2550, 3100]);// PDF.addImage(pageData, "JPEG", 0, 0, 2550, 3100);PDF.save(orderNo + ".pdf");});},

前端VUE完成截取当前页面转PDF，支持分页相关推荐

前端vue/js刷新浏览器页面方法-案例
强制刷新当前页面 reload -- 强迫浏览器刷新当前页面 location.reload([bForceGet]) //重新加载当前文档 bForceGet, 可选参数, 默认为 false,从客 ...
前端Vue项目——课程详情页面实现
一.详情页面路由跳转应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件修改 src/components/Course/Co ...
Puppeteer将动态html页面生成pdf（终极解决方案）
开通掘金好几年一直没有写文章,近一年经常有朋友问我将动态的h5/vue/react/原生js 页面转成pdf,我觉得有必要写个文章,给大家提供一套经过多个项目验证的完整解决方案的思路:觉得有用可以点赞 ...
SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF
场景 SpringBoot加itext实现PDF导出: SpringBoot加itext实现PDF导出_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面实现导出pdf的基础上,怎样结合 ...
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现
前端vue项目(使用pdf.js) pdf展示及pdf工具栏放大缩小功能实现 1.vue项目pdf展示 2.pdf工具栏放大缩小功能文章目录前端vue项目(使用pdf.js) pdf展示及pdf工 ...
vue 页面转pdf 并下载
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downl ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...

前端VUE完成截取当前页面转PDF，支持分页

使用html2canvas+jspdf实现，可直接复制过去用

前端VUE完成截取当前页面转PDF，支持分页相关推荐

最新文章

热门文章