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

  • “懂运营,做营销”,大运营策略3大步(学做运营)

    “懂运营,做营销”,大运营策略3大步(学做运营)

  • 红米手表2可以自定义表盘吗(红米手表2可以听音乐吗)

    红米手表2可以自定义表盘吗(红米手表2可以听音乐吗)

  • 三星note9是不是双4g

    三星note9是不是双4g

  • iphone6发热严重怎么办(iPhone6发热严重)

    iphone6发热严重怎么办(iPhone6发热严重)

  • U盘怎么在手机上下载东西(u盘怎么在手机上使用)

    U盘怎么在手机上下载东西(u盘怎么在手机上使用)

  • 小米104g网络不稳定(小米提示网络不给力)

    小米104g网络不稳定(小米提示网络不给力)

  • 小米手环步数可以同步到微信吗(小米手环步数可以修改吗)

    小米手环步数可以同步到微信吗(小米手环步数可以修改吗)

  • iphone11怎么显示电量(iPhone11怎么显示网速)

    iphone11怎么显示电量(iPhone11怎么显示网速)

  • 怎么找回以前的照片(怎么找回以前的手机号)

    怎么找回以前的照片(怎么找回以前的手机号)

  • system product name是什么主板

    system product name是什么主板

  • 淘宝天天领红包怎么领(淘宝天天领红包在哪)

    淘宝天天领红包怎么领(淘宝天天领红包在哪)

  • 锁定的word怎么修改(锁定的word怎么编辑)

    锁定的word怎么修改(锁定的word怎么编辑)

  • 亲情关怀为什么登入不了(亲情关怀为什么别人的手机界面在我这边是黑的)

    亲情关怀为什么登入不了(亲情关怀为什么别人的手机界面在我这边是黑的)

  • 饿了么发票在哪里找(饿了么发票在哪儿看)

    饿了么发票在哪里找(饿了么发票在哪儿看)

  • 苹果11是几个摄像头(苹果11几个摄像头管用)

    苹果11是几个摄像头(苹果11几个摄像头管用)

  • 探探别人向我打招呼哪里查看(探探老给我发短信说有人)

    探探别人向我打招呼哪里查看(探探老给我发短信说有人)

  • 为什么苹果手机4g变2g(为什么苹果手机突然黑屏打不开)

    为什么苹果手机4g变2g(为什么苹果手机突然黑屏打不开)

  • 拼多多果园咋样能卸载(拼多多果园怎么才能有资格)

    拼多多果园咋样能卸载(拼多多果园怎么才能有资格)

  • 苹果手机自带输入法怎么换行(苹果手机自带输入法)

    苹果手机自带输入法怎么换行(苹果手机自带输入法)

  • vivos1屏幕分辨率在哪里调(vivos1的分辨率)

    vivos1屏幕分辨率在哪里调(vivos1的分辨率)

  • 荣耀20灭屏会显示时间的怎么设置(荣耀20灭屏显示时间怎么设置)

    荣耀20灭屏会显示时间的怎么设置(荣耀20灭屏显示时间怎么设置)

  • 如何设置淘宝商品宝贝上下架时间(如何设置淘宝商品进入购物车后显示店铺名称)

    如何设置淘宝商品宝贝上下架时间(如何设置淘宝商品进入购物车后显示店铺名称)

  • 如何修改电脑默认用户名Administrator?(如何修改电脑默认打印机)

    如何修改电脑默认用户名Administrator?(如何修改电脑默认打印机)

  • CarrierEditor教你不越狱修改IOS设备运营商logo(carrier profile)

    CarrierEditor教你不越狱修改IOS设备运营商logo(carrier profile)

  • sessmgr.exe - sessmgr是什么进程 有什么用

    sessmgr.exe - sessmgr是什么进程 有什么用

  • 自行研发的无形资产不确认递延所得税
  • 一般纳税人每个月需要报哪些税
  • 支付利息现金流量表中什么增加
  • 餐饮流水账表格excel
  • 购房返现金需要什么资料
  • 支付境外技术服务费代扣代缴所得税账务处理
  • 利润表季报本月金额是本季度余额吗
  • 一般纳税企业可以变更小微企业吗
  • 委托开发费用免所得税和增值税
  • 已经缴纳的税款可以撤回吗
  • 新房购置税怎么算2022
  • 房屋租赁费增值税专用发票几个点
  • 税控系统服务
  • 开票系统里的开户行可以更改吗
  • 不管金税四期上线与否,税务严查一刻也没有放松!
  • 当期损益包括哪些费用
  • 企业核销应收账款需要什么资料
  • 多交附加税不退怎么做分录
  • 增值税专用发票怎么开
  • 在win7系统中将打开窗口拖到屏幕顶端
  • 如何在win11上安装旧版ie
  • 发票失控进项转出所得税
  • 营改增后房地产企业账务处理
  • jquery向下滑动元素
  • 语音模块作用
  • 计提本月应交的所得税费用
  • 应付职工薪酬的借方和贷方
  • 资产盘盈盘亏处理
  • 计算机网络的基本概念
  • 公司有个税怎么交
  • vue引用类型
  • 二次封装机
  • 直接费用的定义
  • this.emit('input')
  • 论文精读分析报告
  • java开源二次开发平台
  • 有没有网上学电脑的
  • 税控盘抵扣怎么做账
  • 季度是指
  • python类的继承与多态
  • 差旅费报销会计凭证
  • 无偿帮工造成财产损失谁赔偿 法院
  • db2 -968
  • 预提费用是应付账款吗
  • 存货跌价准备的特点
  • 企业营业外收入有哪些
  • 进项税转出金额怎么算
  • 咨询费收入成本怎么算
  • 如何核算购进商品
  • 预缴增值税可以抵扣销项税吗
  • 不抵扣的进项发票需要在电子税务局操作么
  • 合同章盖成公章
  • 个人账户打流水需要本人吗
  • 食堂没发票如何记账
  • sql Server 触发器的when的用法
  • mac电脑双系统
  • windows禁止安装
  • win7咋样
  • u极速u盘启动官网
  • 让windows server 2003 32位支持8G内存大内存
  • centos查看目录空间大小
  • windowsxp oobe
  • ps显示操作步骤
  • newsupd.exe - newsupd是什么进程 有什么用
  • windows8咋关机
  • 红石怎么启动
  • win8启动设置选哪个
  • perl使用保留字引用什么模块
  • shell脚本实例精讲
  • angular中ui calendar的一些使用心得(推荐)
  • angular jsx
  • jquery easyui从零开始学pdf
  • android混淆后怎么破解
  • jquery访问本地html
  • 非正常户记录
  • 国家税务总局并入财政部最新消息
  • 湖北地税局官网网上服务厅
  • 为什么征收城市建设维护税却不征收教育附加税
  • 郑州房产交契税在哪里交
  • 请领导审核怎么说
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设