快捷導(dǎo)航

vue實現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問題(推薦)

更新時間：2018年10月18日 09:53:04 作者：燦爺?shù)那岸酥?

最近公司項目需要，利用vue實現(xiàn)pdf導(dǎo)出，從而保存到本地打印出來，說起來好像也很容易，具體要怎么實現(xiàn)呢？下面小編給大家?guī)砹藇ue實現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問題，需要的朋友參考下吧

最近公司項目需要，利用vue實現(xiàn)pdf導(dǎo)出，從而保存到本地打印出來，說起來好像也很容易，具體要怎么實現(xiàn)呢？

1 、我們要添加兩個模塊

1 第一個.將頁面html轉(zhuǎn)換成圖片
2 npm install --save html2canvas
3 第二個.將圖片生成pdf
4 npm install jspdf --save

2 、定義全局函數(shù) .. 創(chuàng)建一個htmlToPdf .js 文件在指定位置 . 我個人習(xí)慣放在 ( ' src /utils/htmlToPdf' )

// 導(dǎo)出頁面為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 、在 main.js 中使用我們定義的函數(shù)文件。

 import htmlToPdf from '@/components/utils/htmlToPdf'
 Vue.use(htmlToPdf)

4 、在需要的導(dǎo)出的頁面 .. 調(diào)用我們的 getPdf 方法即可 .

 <div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
   //給自己需要導(dǎo)出的ui部分.定義id為"pdfDom".此部分將就是pdf顯示的部分
 </div>
 <button type="button" class="btn btn-primary"v-on:click="getPdf()">導(dǎo)出PDF</button>
 export default {
  data () {
    return {
    htmlTitle: '頁面導(dǎo)出PDF文件名'
    }
  }
 }

到這里大家會發(fā)現(xiàn)功能是可以實現(xiàn)了，但是會有個致命的問題，導(dǎo)出來的pdf打印出來還是比較模糊的，那么，針對這個問題，我們要怎么解決呢？

我們的思路是：將canvas的屬性width和height屬性放大為2倍，最后將canvas的css樣式width和height設(shè)置為原來1倍的大小即可，也就是，先將canvas高分辨率輸出，再來壓縮導(dǎo)出打印，即可，廢話不多說，完整代碼如下：

// 導(dǎo)出頁面為PDF格式
 import html2Canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 export default{
  install (Vue, options) {
   Vue.prototype.getPdf = function (dom,title) {
    var title = title
    var c = document.createElement("canvas")
    var opts = {
     scale: 2, 
     canvas: c, 
     logging: true, 
     width: document.querySelector(dom).width, 
     height: document.querySelector(dom).height 
    };
    c.width = document.querySelector(dom).width * 2
    c.height = document.querySelector(dom).height * 2
    c.getContext("2d").scale(2, 2);
    html2Canvas(document.querySelector(dom), opts).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')
    }
    )
   }
  }
 }

總結(jié)

以上所述是小編給大家介紹的vue實現(xiàn)pdf導(dǎo)出解決生成canvas模糊等問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: