vue项目中页面生成pdf并下载，vue 中页面转PDF

方法一

第一步、安装插件

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

第二步、定义全局函数,创建一个htmlToPdf.js文件在指定位置.例如放在('src/utils/html2pdf')

// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {install (Vue, options) {Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {var element = document.getElementById("pdfCentent")html2canvas(element, {logging: false}).then(function (canvas) {var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向var ctx = canvas.getContext("2d")var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257var 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.save(htmlTitle + currentTime)})}}
}

第三步、在main.js中引入，全局引用

import htmlToPdf from "../src/utils/html2pdf"
Vue.use(htmlToPdf)

第四步、在用到的组件 .vue中使用

<div id="pdfCentent">
需要生成pdf的内容</div><el-button type="danger"@click="ExportSavePdf(htmlTitle,nowTime)">导出PDF</el-button>

export default {data () {return {htmlTitle: "PDF名称",nowTime: "",}}}

方法二

使用window.print()方法

let handleWindowPrint = (ele, fileName, vm)=>{var oIframe = document.createElement('iframe');var oScript = document.createElement('script');document.body.appendChild(oIframe);var titleText = document.head.getElementsByTagName('title')[0].innerText;document.head.getElementsByTagName('title')[0].innerText = `${fileName}`;oIframe.contentDocument.head.innerHTML = `<meta charset="utf-8"><title>${fileName}</title><meta name="format-detection" content="telephone=no"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0">`;// oIframe.contentWindow.document.body.innerHTML = document.querySelector(ele).outerHTML;oIframe.contentDocument.body.innerHTML = document.querySelector(ele).outerHTML;oScript.innerHTML = 'window.print();';oIframe.contentDocument.body.appendChild(oScript);document.body.removeChild(oIframe);document.head.getElementsByTagName('title')[0].innerText = titleText;};export default {handleWindowPrint
}

或用插件 vue-print-nb https://github.com/Power-kxLee/vue-print-nb

第一步、安装

npm install vue-print-nb --save

第二步、在main.js中引用

import Print from 'vue-print-nb'Vue.use(Print);

第三步、组件中使用

 <button v-print="printObj">Print local range</button><div id="printMe" style="background:red;"><p>葫芦娃，葫芦娃</p><p>一根藤上七朵花 </p><p>小小树藤是我家 啦啦啦啦 </p><p>叮当当咚咚当当　浇不大</p><p> 叮当当咚咚当当 是我家</p><p> 啦啦啦啦</p><p>...</p></div>export default {data() {return {printObj: {id: "printMe",popTitle: 'good print',extraCss: 'https://www.google.com,https://www.google.com',extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'}};}
}

vue项目中页面生成pdf并下载，vue 中页面转PDF相关推荐

vue项目通过Electron生成桌面应用
vue项目通过Electron生成桌面应用一.安装 1. 把electron的官方demo下载下来 2. 安装cnpm 3. npm start 启动electron 4. 修改vue项目 5. 打 ...
解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因艰难路程解决办法艰难路程事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址
vue项目打包后生成一个配置文件可以修改打包后的服务器api地址问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
pdf打印机下载后如何打印成pdf文件
我们上班的时候,都会用到打印机的,如果我们不方便买打印机的话,可以用虚拟的啊,那么pdf打印机下载后如何打印成pdf文件,别急,我这就告诉你. 1.在百度中去搜索软件关键词迅捷PDF虚拟打印机,然后进 ...
vue 页面生成pdf并下载 vue页面转PDF
一: 安装插件 // 第一个.将页面html转换成图片 npm install --save html2canvas // 第二个.将图片生成pdf npm install jspdf --save ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
vue项目利用uuid生成唯一随机字符串判定临时游客
我们的项目上线后,除了给用户提供登录注册后,使用该网页功能外,还需要提供临时游客身份,除了进行独立数据的存储,还有给用户拥有临时用该网页一些功能的体验,打游戏的童鞋应该知道,有些游戏会提供临时游客身份 ...
在vue项目npm run build后，index.html中引入css和js 报MIME type问题
问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html ...
vue项目使用uniapp生成app过程
首次接触uniapp 像个丈二和尚百度无果最终求助uniapp官方群群友解决把我的完成过程记录下来详细步骤 1. npm run build 打包vue项目 2. 在 HbuilderX 新建 ...

vue项目中页面生成pdf并下载，vue 中页面转PDF

方法一

方法二

vue项目中页面生成pdf并下载，vue 中页面转PDF相关推荐

最新文章

热门文章

vue项目中 页面生成pdf并下载，vue 中页面转PDF

方法一

方法二

vue项目中 页面生成pdf并下载，vue 中页面转PDF相关推荐

最新文章

热门文章

vue项目中页面生成pdf并下载，vue 中页面转PDF

vue项目中页面生成pdf并下载，vue 中页面转PDF相关推荐