vue导出pdf

最新推荐文章于 2024-08-20 14:01:33 发布

尚憨憨

最新推荐文章于 2024-08-20 14:01:33 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/szh1127249432/article/details/109337174

版权

本文介绍了如何在Vue项目中实现PDF导出功能，通过安装jspdf和html2canvas插件，创建htmlToPdf.js文件并全局引入到main.js中。在需要导出的页面上，点击按钮调用Vue原型上的getPdf方法，即可将页面内容转化为PDF。

摘要由CSDN通过智能技术生成

1.安装插件 jspdf html2canvas

   //第一个.将页面html转换成图片
    npm install --save html2canvas 
    //第二个.将图片生成pdf
    npm install jspdf --save

2、创建htmlToPdf.js文件

//分页
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
   
  install (Vue, options) {
   
    Vue.prototype.getPdf = function (idStr, title) {
   
      html2Canvas(document.querySelector('#' + idStr), {
   
        // allowTaint: true,
        useCORS: true,
        // scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
   
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        // 一页pdf显示html页面生成的canvas高度;
        const pageHeight = contentWidth / 592.28 * 841.89
        // 生成pdf的html页面高度
        let leftHeight = contentHeight
        // 页面偏移