前端导出pdf

html2canvas文档地址

http://html2canvas.hertzen.com/configuration

方式一：使用html2canvas和jspdf插件实现

该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下：

1,下载插件模块

npm install html2canvas jspdf --save

2,定义功能实现方法

在项目工具方法存放文件夹utils中创建htmlToPdf.js文件，代码如下：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        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 -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  }
}

3, 全局引入实现方法

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

4, 在相关要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id即可

/html

</div>

<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>

</div>

这里模拟一个页面在sript标签中写

const html1=`<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是需要pdf导出的页面</title>
</head>
<style>
    .lala{
        300px;
        height:300px;
        background:pink;
        color:red;
        font-size:60px;
    }
</style>
<body>
    <div class="lala">我是有颜色的div</div>
</body>
</html>`

data

data(){
        return {
            htmlTitle: '页面导出PDF文件名',
            pageData:html1
        }
    },

当然，如果是导出当前页面，就不用这么麻烦了，把最外成元素的id写成pdfDom就可以了

以上就是前端简单导出pdf

文章来源：

https://www.jianshu.com/p/56680ce1cc97

当然：为了减少，项目体积html2canvas.js可以用bootcdn引入，

首先在html页面用script标签引入html2canvas.js，在config.js中设置

externals: {
      'html2canvas':'html2canvas'
    }

这样就可以通过import在自己的js内引入html2canvas.js了，例如下面

import html2Canvas from 'html2canvas'

不过，用这种方式引入jspdf.js却没成功，或许是不知道jspdf.js全局变量，知道的大神可以留言

测试了下代码，bug来了！！！

当我把需要转化成cavas的html内容高度写的老高时，发现上述代码只生成了视口之内的内容，视口之外的内容没有生成到cavas上，调了老半天，在网上查了个方法试试，

就是，将要转化cavas的元素，用jquery的克隆方法克隆一份，然后添加到body内，再让html2canvas.js去按照这个克隆的元素，去生成cavas，然后就可以生成完整了，pdf保存之后，再将这个克隆的元素删除，修稿后的代码如下：

htmlToPdf.js：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'


export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle;
      var targetDom = $("#pdfDom");
      let copyDom = targetDom.clone();
      $('body').append(copyDom);
      html2Canvas(copyDom, {
        allowTaint: true,
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        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 -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf');
        copyDom.remove();
      }
      )
    }
  }
}

哦了，但是有一点，我点击生成的时候，页面会闪出来一下那个克隆的元素，又消失，感觉不大好，继续解决