一：安装插件

// 第一个.将页面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><button  @click="ExportSavePdf(htmlTitle,nowTime)">导出PDF</button>

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

第二种，使用插件 vue-print-nb

https://www.npmjs.com/package/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 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
Springboot访问jsp页面但是却变成下载该页面
Springboot访问jsp页面但是却变成下载该页面缺少jsp解析的依赖,加上即可 <dependency><groupId>or ...
vue.js中文官网下载vue.js失败了？
访问vue官网 https://v2.cn.vuejs.org/v2/guide/installation.html下载vue.js,页面直接报错404,只需要切换到英文版,重新下载即可成功. 或者直 ...
前端将页面生成word并下载
jquery.wordexport.js 源码 if (typeof jQuery !== "undefined" && typeof saveAs !== &q ...
java pdf插件下载_免费java pdf控件
云原生的概念和理论体系非常的完备,but talk is cheap , show me the code ! 但是作为一名程序员,能动手的咱绝对不多BB,虽然talk并不cheap , 能跟不同层次 ...
vue 页面转pdf 并下载
最近需要做一个下载vue页面为pdf格式的功能,网上方案有很多,也尝试了其他方案,最终采用的方案流程就是点击下载报告按钮,则请求后端一个接口,例如接口地址为example.cn/file/downl ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
vue项目将页面生成pdf
项目场景: vue项目运行在移动端(企业微信聊天栏工具.企业微信浏览器.微信浏览器.外部浏览器),PC端(微信浏览器.其他厂商浏览器),利用html2canvas将页面生成图片文件,并采用jspdf将 ...
vue页面生成pdf 完整demo 及其踩得坑
bug 导出图片不显示这里是图片跨域了这里一般情况下都是用的html2canvas自带的方法 useCORS: true,(ps): 一般情况下不行看脸也有说是阿里的图片上传限制了只要去后置设置下请 ...

vue 页面生成pdf并下载 vue页面转PDF

一：安装插件

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

三：在main.js中引入，全局引用

四：在用到的组件 .vue中使用

第二种，使用插件 vue-print-nb

一：安装

二：在main.js中引用

三：组件中使用

vue 页面生成pdf并下载 vue页面转PDF相关推荐

最新文章

热门文章

vue 页面生成pdf并下载 vue页面转PDF

一： 安装插件

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

三：在main.js中引入，全局引用

四：在用到的组件 .vue中使用

第二种， 使用插件 vue-print-nb

一： 安装

二：在main.js中引用

三：组件中使用

vue 页面生成pdf并下载 vue页面转PDF相关推荐

最新文章

热门文章

一：安装插件

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

第二种，使用插件 vue-print-nb

一：安装