位置: 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 的新写法(十分钟带你了解阿氏圆)

  • 汇算清缴补交所得税会计分录小企业会计政策
  • 可以按小型微利企业核算企业所得税吗
  • 税控盘开票系统怎么升级
  • 企业所得税税负率多少合适
  • 进项税额比销项税额大怎么办
  • 专家住宿费入什么科目
  • 税控盘解锁是什么意思
  • 预缴所得税的计税依据
  • 金蝶迷你版会计科目代码格式
  • 代订机票服务费可以抵扣进项吗
  • 进项税加计扣除账务处理
  • 加工皮革出口能申请退税吗
  • 车辆购置附加税证丢了能过户吗
  • 跨年度借款利息的税务处理怎么做?
  • 公司注销银行公户怎么注销
  • 销售折扣开票怎么开
  • 往来款少付零头怎么入账
  • 特许权使用费如何确认收入
  • 增值税专用发票几个点
  • 发票密码区出格了怎么调整
  • 物流公司转包出售合法吗
  • 销售购物卡如何开票
  • 公司购买理财产品计入什么科目
  • 地方教育费附加的会计分录
  • 报销时可以一个人报销吗
  • 发票专用章是个人
  • netframework4.8安装未成功
  • php7 ??
  • 计算机怎么设置长亮
  • vue click触发两次
  • 政府性基金和行政事业性收费区别
  • 售后回租融资租赁案例
  • php开发实例大全
  • 快速上手:华硕路由器的wireguard服务器
  • 物业管理公司经营范围有哪些内容
  • Linux常用命令与vim
  • python第三方库安装教程
  • Mongodb中MapReduce实现数据聚合方法详解
  • gin框架使用案例
  • 新事业单位会计制度下固定资产的核算
  • 会影响当期损益的科目有
  • sql2008服务器
  • 支付员工的餐费怎么入账
  • mysql5.5创建用户
  • 建筑行业普票和专票的税率一样吗
  • 工程建设期间发生的差旅费
  • 企业支付临时工劳务报酬需要取得发票吗
  • 办外经证需要交税吗
  • 所得税暂缓缴纳本来是不缴纳
  • 计提本月应交增值税
  • 住宿费发票属于会计凭证吗
  • 小规模转一般纳税人进项票如何处理
  • 资产负债表中应交税费为负数是什么意思
  • 生产的半成品怎么做分录
  • 企业注销以后
  • sql server设置自增
  • 解决五大问题
  • linux命令rz -y
  • securecrt设置英文
  • 怎么把win8界面换成win7
  • sendmail端口
  • won7系统优化
  • ExtJS 2.0实用简明教程 之Border区域布局
  • 如何使用shell脚本将文件中的人分组,并输出
  • Bullet之了解Force Torque Impulse
  • unity游戏开发入门经典
  • qt搭建opencv
  • Node.js中的全局对象有
  • unity3d改变物体坐标系
  • unity移动游戏开发
  • 适用于分析原因的工具有哪些
  • unity 2021.2
  • 关于python中的判断条件
  • 一般纳税人开劳务费税率是多少2023
  • 社保归国税还是地税
  • 个体户注销还要交税吗?
  • 中科院有多少在校研究生
  • 江苏地税局如何交社保
  • 税务备案表付汇日期是否可以提前
  • 四川社保2020增资方案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设