vue将页面导出pdf，vue导出pdf

vue导出pdf

新需求：需要前端下载把当前html下载成pdf文件
方法一：菜鸟觉得牛逼啊，这必须记录下来嗷嗷嗷嗷
1、第一步：我们要添加两个模块

//第一个：将页面html转换成图片
npm install --save html2canvas
//第二个:将图片生成pdf
npm install jspdf --save

2、第二步：

定义全局函数…创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf’)中
htmlToPdf.js文件内容：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue, options) {Vue.prototype.getPdf = function () {var title = this.htmlTitle// html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id //只下载id为pdfDom的内容html2Canvas(document.body, { //body是下载整个界面useCORS: true, //是否尝试使用CORS从服务器加载图像allowTaint: true,dpi: 300, //解决生产图片模糊// width: 490, //canvas宽度// height: 240, //canvas高度// x: 0, //x坐标// y: 0, //y坐标async: false, //是否异步解析和呈现元素foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;let leftHeight = contentHeight //未生成pdf的html页面高度let position = 0 //pdf页面偏移//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let 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', 20, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}
}

3、第三步：在main.js中使用我们定义的函数文件

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

4、第四步：在需要的导出的页面，调用我们在htmlToPdf.js定义的getPdf方法即可.
我是在登录界面调的，所以我在Login.html的模板中写的

   <template><el-button type="primary" @click="getPdf()">下载pdf</el-button><!-- 给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分 --><div class="login_box" id="pdfDom"><!--图片区域--><div class="avatar_box"><img src="../assets/logo.png" /></div></div>[添加链接描述](https://www.jianshu.com/p/dd120b65446a)</template>

然后在

   <script>
export default {data() {return {htmlTitle: "页面导出PDF文件名", //这是定义导出的名字，不写这个默认下载的名字是undefinded}}}</script>

时隔一年，我又回来了，虽然还是菜，但是感觉比之前进步了不少，还得继续加油，上一年没继续写，是因为去了一件信息安全要求比较高的公司，不许上微信，不允许贴代码啥的，回到家我又没记住那代码，所以就没更，现在换了一家公司，以后我会坚持的！一起加油啊！！

方法二：
我又来了，有个需求下载pdf，我放在el-dialog里面了，页面是这样的：

想要下载的样子是这样的：

但是我作死搞了很久，用了第一种方法就是不行，下载的pdf文档只有黑块没有内容，然后我琢磨了一天，终于搞好了。下面是方法二：

1、第一步：我们要添加两个模块

//第一个：将页面html转换成图片
npm install --save html2canvas
//第二个:将图片生成pdf
npm install jspdf --save

第二步：在html中你想要的地方加一个ref=“orderForm1”

  <div class="orderFoodInfoTop pdfDom" ref="orderForm1">比如这是我想下载的内容</div><el-button @click="pdfDownload">下载</el-button>//下载按钮

这是方法在methods中写的：

// 下载pdfpdfDownload() {let _this = thislet myBox = this.$refs.orderForm1; //获取ref里面的内容html2canvas(myBox, {useCORS: true, //是否尝试使用CORS从服务器加载图像allowTaint: true,dpi: 300, //解决生产图片模糊scale: 3, //清晰度--放大倍数}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;let leftHeight = contentHeight //未生成pdf的html页面高度let position = 0 //pdf页面偏移//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高// let imgWidth = 595.28let imgWidth = 560.28  //宽度let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(_this.$t('食堂利用明细') + '.pdf')//下载标题});},

_this.$t（）你们可以不用管，这是我国际化的组件用法，这就是全部方法了。

vue将页面导出pdf，vue导出pdf相关推荐

搭建一个vue小页面（入门vue）
最近在学习vue框架,找了很久在网上找到下面这篇博客,觉得写得通俗易懂,就是其中有些代码尝试了有一点点的小问题,我猜可能版本不同的问题,造成不同的结果,但框架的思想我是觉得写得很通俗易懂的,供大家共享 ...
vue 单一页面_带有vue的单一Flash消息
vue 单一页面 Vue Flash消息 (vue-flash-message) The component to display single flash message to user. It h ...
vue截取页面一部分内容并导出图片
安装插件 npm install html2canvas --save 引入当前需要的vue文件 import html2canvas from "html2canvas"; 全部 ...
vue将页面html导出为pdf
1.npm i html2canvas 2.npm i jspdf 3.创建一个js文件 // 页面导出为pdf格式 //title表示为下载的标题,html表示document.querySelec ...
Springboot Vue Login(从零开始实现Springboot+Vue登录)
实现前端后端分离,在 Github 上有一个很好的开源项目:mall,正所谓百看不如一练,自己动手实现了一个 Springboot+Vue 的登录操作,在此记录一下踩过的坑. 文章最后补充两端的 Gi ...
vue使用html2canvas jspdf实现pdf下载导出功能
vue使用html2canvas jspdf实现pdf下载导出功能功能步骤介绍: 1.安装全局.局部引用 2.封装 html2canvas结合 JsPDF 下载导出方法 3.组件页面调用
vue 实现下载pdf、导出png、打印功能
1.下载PDF 引入 html2canvas 和 jspdf npm install html2canvas npm install jspdf --save 2.在utils文件创建htmlToPd ...
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...
还不会用Vue写出的excel表实现pdf导出吗？来，豪豪手把手教你
关于这excel的pdf导出一问题,正常情况下都会伴随一个点击事件的按钮,为什么?因为你不去点他,让他自己导出吗,用户体验感能好?本内存就小,这倒好,打开一次自动下载并生成一个pdf,就连刷新也是,想 ...
页面截图导出为PDF，以及PDF强行截断分页问题的处理
页面截图导出为PDF,以及PDF强行截断分页问题的处理需求将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示. 思路 1.将需要导出的dom,都用一个特殊的类 ...

vue将页面导出pdf，vue导出pdf

vue导出pdf

vue将页面导出pdf，vue导出pdf相关推荐

最新文章

热门文章