vue导出并定制PDF样式

灰太狼 2023-09-27 11:56 123阅读 0赞

**目录**

1.前言

2.效果图部分截图举例

编辑

3.步骤

3.1 下载插件

3.2 src/utils目录下新建jsPdf.js文件，将以下代码粘贴进去

3.3 main.js 文件里引入，并注册

3.4 在要导出的页面添加id和点击事件

4.一些问题和解决方式

4.1 模糊问题

4.2 分页问题

--------------------

### 1.前言 ###

> 需求是将项目中的一些图标或数据以PDF的格式下载下来，并且要求样式好看，且格式按照需求调整

--------------------

### 2.效果图部分截图举例 ###

![736db884f9d14fa88375f21618e88aa5.png][]

### ![da192675155041d68ed27d51f90d2f5f.png][] ###

--------------------

### 3.步骤 ###

--------------------

#### 3.1 下载插件 ####

npm install --save html2canvas
    npm install jspdf --save

#### 3.2 src/utils目录下新建jsPdf.js文件，将以下代码粘贴进去 ####

// 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
      install (Vue) {
        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.3 main.js 文件里引入，并注册 ####

Vue.use(htmlToPdf)
    Vue.use(VueContextMenu)

#### 3.4 在要导出的页面添加id和点击事件 ####

![0e202ce4fe1f4468b1879f3511062d09.png][]

data () {
        return {
          htmlTitle: '页面导出PDF文件名',//htmlTitle代表导出文件名
        }
      },
     methods: {
        downloadPdf () {
          this.getPdf()
        }
      },

至此，完成导出功能

--------------------

### 4.一些问题和解决方式 ###

> #### 4.1 模糊问题 ####
> 
> 据说这个插件会导致模糊现象，但是我感觉还是挺清楚的。
> 
> #### 4.2 分页问题 ####
> 
> 再一个就是，分页问题，具体来说就是比如一个图可能上一页有一半，另一半在下一页，这样就不好了。我得解决方式就是使用margin和padding来调整布局，经过在三台不同分辨率不同屏幕大小下实测，均正常。

[736db884f9d14fa88375f21618e88aa5.png]: https://img-blog.csdnimg.cn/736db884f9d14fa88375f21618e88aa5.png
[da192675155041d68ed27d51f90d2f5f.png]: https://img-blog.csdnimg.cn/da192675155041d68ed27d51f90d2f5f.png
[0e202ce4fe1f4468b1879f3511062d09.png]: https://img-blog.csdnimg.cn/0e202ce4fe1f4468b1879f3511062d09.png