位置: IT常识 - 正文

Vue页面生成PDF的方法(vue 页面生成pdf)

编辑:rootadmin
Vue页面生成PDF的方法

推荐整理分享Vue页面生成PDF的方法(vue 页面生成pdf),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue模板动态生成pdf,vue页面生成pdf的原理,vue pdf,vue3 pdf,vue 页面生成pdf,vue pdf,vue 展示pdf文件内容,vue页面生成pdf的原理,内容如对您有帮助,希望把文章链接给更多的朋友!

最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF。

这种方法可以有两种,一种是直接调用打印,用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差,且体验不好,显然不是我们想要的效果。

那么第二种方法的实现思路是什么呢?

首先生成报告页面,也就是常规页面; 然后将页面转换成图片( 用到的组件 html2canvas ); 最后将图片导出成PDF( 用到的组件 jspdf )。

安装依赖npm install --save html2canvas // 页面转图片npm install jspdf --save // 图片转pdf页面转图片

新建一个 index.vue 页面:

<template> <div ref="pdf"> 这是待转换的页面,点击 <button @click="handleExport">导出</button> 按钮,完成导出操作。 </div></template><script>import {downloadPDF} from "@/util/pdf.js" //工具方法,导出操作export default { name: "pdf", data() { return {}; }, methods: { handleExport(){ downloadPDF(this.$refs.pdf) } }};</script>

页面很简单,一段话加上一个导出按钮。整个页面被设置别名 (ref=“pdf”),导出的时候通过别名导出整个页面。

按钮点击事件中调用了一个工具方法 downloadPDF(),来自于工具类 pdf.js:

import html2canvas from "html2canvas";export const downloadPDF = page => { html2canvas(page).then(function(canvas) { page.appendChild(canvas); });};Vue页面生成PDF的方法(vue 页面生成pdf)

也很简单,首先引入了 html2canvas,定义downloadPDF方法,接受一个参数就是要导出的内容,可以使用id获取,也可以使用 ref 。

运行结果:

当我们点击导出按钮后,在现有的页面增加了一行相同的内容。通过元素检查器可以看到增加的这行内容实际是一个 canvas 图像,里面的按钮已经不可以操作了。

这样,页面转换图片的过程就完成了。

图片转PDF

首先给index.vue改造一下,为了让我们导出的pdf好看一点,使用el-table做个表格,其它的导出逻辑不变:

<template> <div ref="pdf"> <el-table :data="tableData" style="width: 700px"> <el-table-column prop="date" label="时间" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="对我说"> </el-table-column> </el-table> <button @click="handleExport">导出</button> </div></template><script>import {downloadPDF} from "@/util/pdf.js" //工具方法,导出操作export default { name: "pdf", data() { return { tableData: [{ date: '昨天', name: '刘德华', address: '你好帅' }, { date: '今天', name: '郭富城', address: '你最帅' }, { date: '明天', name: '张学友', address: '你贼帅' }, { date: '每天', name: '黎明', address: '我没你帅' }] }; }, methods: { handleExport(){ downloadPDF(this.$refs.pdf) } }};</script>

效果图: 然后改造一下pdf.js,增加上pdf转换逻辑

import html2canvas from "html2canvas";import jsPDF from "jspdf";export const downloadPDF = page => { html2canvas(page).then(function(canvas) { canvas2PDF(canvas); });};const canvas2PDF = canvas => { let contentWidth = canvas.width; let contentHeight = canvas.height; let imgHeight = contentHeight; let imgWidth = contentWidth; // 第一个参数: l:横向 p:纵向 // 第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px") let pdf = new jsPDF("l", "pt"); pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0, imgWidth, imgHeight ); pdf.save("导出.pdf");};

canvas2PDF 方法中创建了jsPDF的实例,然后添加上一步生成的图片,最后保存导出pdf文件。

导出的文件效果:

A4打印适配

因为部分需求有需要生成的页面使用A4纸打印,那么pdf生成时的宽高尺寸就不能像上面一样设定。需要按照A4纸的尺寸比例调整(其它打印需求同理,使用对应纸张比例即可)

那么改造一下 pdf.js

import html2canvas from "html2canvas";import jsPDF from "jspdf";export const downloadPDF = page => { html2canvas(page).then(function(canvas) { canvas2PDF(canvas); });};const canvas2PDF = canvas => { let contentWidth = canvas.width; let contentHeight = canvas.height; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 let imgWidth = 595.28; let imgHeight = 592.28/contentWidth * contentHeight; // 第一个参数: l:横向 p:纵向 // 第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px") let pdf = new jsPDF("p", "pt"); pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), "JPEG", 0, 0, imgWidth, imgHeight ); pdf.save("导出.pdf");};

这里面将 imgWidth 和 imgHeight 按照A4纸比例调整后,导出的pdf就可以正常比例打印了。

本文链接地址:https://www.jiuchutong.com/zhishi/284160.html 转载请保留说明!

上一篇:路由器登录地址如何查看?查看路由器登陆地址方法(华硕路由器登录地址)

下一篇:十分钟,带你了解 Vue3 的新写法(十分钟带你了解阿氏圆)

  • 互联网营销:微博营销的10种操作模式(互联网营销新玩法)

    互联网营销:微博营销的10种操作模式(互联网营销新玩法)

  • 三星笔记本怎么用u盘重装系统(三星笔记本质量)(三星笔记本怎么进bios)

    三星笔记本怎么用u盘重装系统(三星笔记本质量)(三星笔记本怎么进bios)

  • iwatch排水功能如何使用(iwatch排水功能如何解除)

    iwatch排水功能如何使用(iwatch排水功能如何解除)

  • 华为手环有测血压的吗(华为手环有测血压功能吗)

    华为手环有测血压的吗(华为手环有测血压功能吗)

  • 卖天猫积分对淘宝号有没有影响(使用天猫积分卖家可以收到钱吗)

    卖天猫积分对淘宝号有没有影响(使用天猫积分卖家可以收到钱吗)

  • duilib.dll是干嘛的(duilib32.dll)

    duilib.dll是干嘛的(duilib32.dll)

  • 腾讯会议视频时可以切换屏幕吗(腾讯会议视频时开小窗会被发现吗)

    腾讯会议视频时可以切换屏幕吗(腾讯会议视频时开小窗会被发现吗)

  • 充电宝可以边充电边充手机吗(充电宝可以边充电边玩手机吗)

    充电宝可以边充电边充手机吗(充电宝可以边充电边玩手机吗)

  • 什么是抖音垂直内容(什么是抖音垂直领域)

    什么是抖音垂直内容(什么是抖音垂直领域)

  • 充电器发烫是什么原因(充电器发烫是什么会爆炸吗)

    充电器发烫是什么原因(充电器发烫是什么会爆炸吗)

  • ip68能达到什么程度防水(ip68能达到什么程度防水能游泳不)

    ip68能达到什么程度防水(ip68能达到什么程度防水能游泳不)

  • 抖音不加好友可以聊天吗(抖音不加好友可以看到访问记录吗)

    抖音不加好友可以聊天吗(抖音不加好友可以看到访问记录吗)

  • 网易云有访客记录吗(网易云有访客记记录吗)

    网易云有访客记录吗(网易云有访客记记录吗)

  • 微博怎么找之前关注的人(微博怎么找之前的评论)

    微博怎么找之前关注的人(微博怎么找之前的评论)

  • 乐视手机录音在哪里(乐视手机的录音功能在哪里)

    乐视手机录音在哪里(乐视手机的录音功能在哪里)

  • vue做视频怎么快慢变速(vue视屏)

    vue做视频怎么快慢变速(vue视屏)

  • 拼多多假一赔10怎样关闭(拼多多假一赔10发现是假的如何让对方赔)

    拼多多假一赔10怎样关闭(拼多多假一赔10发现是假的如何让对方赔)

  • 二维码什么时候开始使用的(二维码什么时候开始普及的)

    二维码什么时候开始使用的(二维码什么时候开始普及的)

  • 智联招聘如何设置简历不公开(智联招聘如何设置发送附件简历)

    智联招聘如何设置简历不公开(智联招聘如何设置发送附件简历)

  • java静态方法和实例方法的区别(java静态方法和动态方法的区别)

    java静态方法和实例方法的区别(java静态方法和动态方法的区别)

  • phpcms v9无法上传缩略图怎么办(php.ini上传限制)

    phpcms v9无法上传缩略图怎么办(php.ini上传限制)

  • 留抵税额做进项转出怎么做分录
  • 代扣个税怎么做凭证
  • 土地价款抵扣增值税怎么做账
  • 税法里面的损耗是什么
  • 办公室提前退租未摊完的装修费如何处理
  • 哪些收入减免所得税
  • 分公司怎么做
  • 未交增值税科目贷方负数怎么处理
  • 实物性投资资产
  • 持有至到期投资核算内容
  • 商业折扣如何开票
  • 个人申请补交个税怎么写
  • 政府补助怎么开票入账
  • 员工生日福利申请
  • 将自产货物用于在建工程
  • 外币出资汇率变动会计处理
  • 注册资金印花税什么时候开始交
  • 凭证出现错误如何解决
  • 代扣代缴增值税可以抵扣进项税?
  • 出差补贴怎么算
  • 更改onedrive文件夹位置
  • 企业分红需要缴纳什么税
  • 外贸企业汇兑损益要交所得税吗
  • 未形成固定资产的项目卖出怎么入账
  • 补缴以前年度附加税
  • 当期费用包括哪些科目
  • 接入设备检测
  • 长期投资损失的确认
  • 实收资本可以大于注册资本嘛
  • 怎么添加动态磁贴
  • 期间损益的科目
  • wordpress更改字体
  • 政府会计制度固定资产折旧哪个月开始计提
  • php imagestring
  • 税收返还需要缴纳什么税
  • 企业在建工程领用自产的应税消费品
  • php strrev
  • js正则表达式删除特定字符
  • php数组操作函数
  • 计提工资个人所得税账务处理
  • reactjs路由跳转
  • PHP使用http_build_query()构造URL字符串的方法
  • 预算周转金会计处理怎么做
  • 什么是AI工具
  • 专家坐诊信息
  • laravel 实例
  • 金融企业往来支出属于费用吗
  • 小微企业具体指
  • 织梦自定义模型调用
  • 小微企业认定办法
  • 框架合同的印花税
  • 利润分配转作股本的股利属于什么科目
  • 注销时其他应付款借方余额怎么账务处理
  • 转让金融商品应交增值税可以抵扣吗
  • 制造费用和直接人工的关系
  • 当月作废的发票是否需要报税
  • 怎么理解核销
  • 应付职工社会保险费计入什么科目
  • 总分类账封面封地和启用页的区别
  • 怎么统计每日产量
  • 教你设置陌陌耳返
  • mac系统指令集
  • 安装系统需要什么工具
  • 重装win8系统后没有声音
  • window8系统安装步骤
  • xp系统自动锁定
  • 访问win10
  • jquery validate demo 基础
  • shell中的-le
  • vue插件使用
  • nodejs 获取命令行参数
  • unity 更新
  • jquery 图片裁剪
  • node.js express中app.param的用法详解
  • 手机运行node.js
  • android webview webgl
  • 税务局高风险是怎么办
  • 河北电子税务局如何添加办税人员
  • 广西地方税务局2018年1号公告
  • 怎么删除天眼查信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设