Vue中前端实现生成 PDF 并下载-低调大师

Vue中前端实现生成 PDF 并下载

2021-10-08 988

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。

1. 安装及引入

// 将页面 html 转换成图片
npm install html2canvas --save  
// 将图片生成 pdf
npm install jspdf --save
复制代码

在项目主文件 main.js 中引入定义好的实现方法并注册

import htmlToPdf from '@/utils/htmlToPdf';
// 使用 Vue.use() 方法就会调用工具方法中的install方法
Vue.use(htmlToPdf);
复制代码

2. 封装导出 pdf 文件方法

配置详解

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
第一个参数： l：横向  p：纵向
第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）；
第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28, 841.89];
		   a0 - a10
		   b0 - b10
		   c0 - c10
  		   dl
		   letter
		   government-letter
		   legal
		   junior-legal
		   ledger
		   tabloid
		   credit-card
复制代码

pdf.addPage() 在PDF文档中添加新页面，默认a4。参数如下：

pdf.addImage() 将图像添加到PDF。参数如下：

删除某页 pdf

let targetPage = pdf.internal.getNumberOfPages(); //获取总页
pdf.deletePage(targetPage); // 删除目标页
复制代码

保存 pdf 文档

pdf.save(`测试.pdf`);
复制代码

封装导出 pdf 文件方法（utils/htmlToPdf.js）

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        // 获取canvas画布的宽高
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
	      // 一页pdf显示html页面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
	      // 页面偏移
        let position = 0;
	      // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
        let imgWidth = 841.89;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('l', 'pt', 'a4');
        // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight;
            position -= 592.28;
            // 避免添加空白页
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}
复制代码

相关组件中应用

<template>
  <div class="wrap" >
    <div id="pdfDom" style="padding: 10px;">
      <el-table
        :data="tableData"
        border>
        <el-table-column prop="date" label="日期" width="250"></el-table-column>
        <el-table-column prop="name" label="姓名" width="250"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">导出PDF</button>
  </div>

</template>
 
<script>
export default {
  data() { 
    return {
      exportPDFtitle: "页面导出PDF文件名",
      tableData: [
         {
          date: '2016-05-06',
          name: '王小虎',
          address: '重庆市九龙坡区火炬大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '重庆市九龙坡区火炬大道'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江宁区将军大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '南京市江宁区将军大道'
        },, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '武汉市洪山区文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '武汉市洪山区文化大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武汉市洪山区文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江宁区将军大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武汉市洪山区文化大道'
        },
      ]
    } 
  }, 
  methods: {
    btnClick(){
      this.$nextTick(() => {this.getPdf();})
    },
  },  
}
</script>  
复制代码

效果

待优化部分

分页时，页面内容被截断（欢迎留言讨论交流）；
不同内容，另起一页开始；思路：计算超出内容，占最后一页的高度（设定间距 = 页面高度 - 超出部分高度）。

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star:http://github.crmeb.net/u/defu 不胜感激！

微信关注我们

原文链接：https://my.oschina.net/u/5168284/blog/5275243

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

机器人自主学习新进展，百度飞桨发布四足机器人控制强化学习新算法

近日，百度强化学习团队发布了四足机器人控制上的最新研究进展，采用自进化的步态生成器与强化学习联合训练，从零开始学习并掌握多种运动步态，一套算法解决包括独木桥、跳隔板、钻洞穴等多种场景控制难题。百度已开源全部仿真环境和训练代码，并公开相关论文。足式机器人的控制一直是机器人控制领域的研究热点，因为相比于常见的轮式机器人，足式机器人可以像人类一样灵活地跨越障碍，极大地扩展机器人的活动边界。波士顿动力（Boston Dynamics）此前对外发布了其商用的第一款四足机器人Spot，但是相关的控制算法一直没有对外披露。而市面上商业产品采用的控制算法，大部分基于麻省理工学院（MIT）开源的第三代的四足控制算法，需要依赖大量专家经验。近日，百度强化学习团队联合小度机器人团队，基于飞桨机器人控制算法框架PaddleRobotics，发布了四足机器人控制的最新进展。该算法首次提出基于自进化的步态生成器来引导强化学习训练，通过自主学习，机器人能探索出合理的步态并穿越各种各样的高难度场景。这个算法到底有多厉害，先来一睹为快。图一、四足机器人步态展示（注：演示真机为宇树四足机器人产品）我们...

2021-10-08

439

匿名用户在4chan泄露Twitch源码和用户敏感信息。近日，有匿名用户在4chan 匿名imageboard网站上发帖泄露Twitch源码和用户敏感信息。该匿名用户分享了一个种子链接，该链接指向一个125GB的数据，据称这些数据是从6000个内部Twitch Git库窃取的。该匿名用户称，泄露的Twitch 数据包含：整个twitch.tv，包括早期的提交历史; 移动、桌面和视频游戏机Twitch客户端; Twitch使用的各种专用SDK和内部AWS服务; Twitch的其他特征，包括IGDB和CurseForge; 亚马逊Game Studios未发布的Steam竞争对手; Twitch SOC内部红队工具(lol); 2019年至今创作者的支出报告。匿名用户发布的poster名为“twitch leaks part one”，表明未来可能还会公布Twitch泄露的其他数据。 BleepingComputer 研究人员下载了泄露的部分数据，并确认看似是真实的，并且与黑客截图数据是一致的。 Twitch源码和数据泄露由于匿名泄露者也使用了#DoBetterTwitch标签，...

2021-10-08

581

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。