vue使用html2canvas和jspdf將html轉(zhuǎn)成pdf

更新時間：2022年03月04日 09:50:08 作者：小偉0718

在前端開發(fā)中, html轉(zhuǎn)pdf是最常見的需求,下面這篇文章主要給大家介紹了關于vue如何使用html2canvas和jspdf將html轉(zhuǎn)成pdf的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

A4尺寸

A4紙的尺寸是210mm×297mm。

分辨率是72像素/英寸時，A4紙的尺寸的圖像的像素是595×842（推薦用這個大小比例）。

分辨率是150像素/英寸時，A4紙的尺寸的圖像的像素是1240×1754。

分辨率是300像素/英寸時，A4紙的尺寸的圖像的像素是2479×3508。

選擇不同的分辨率圖像像素大小也會隨之變化

安裝插件html2canvas和jspdf

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

html2canvas可以通過獲取HTML的某個元素，然后生成Canvas，能讓用戶保存為圖片。

jsPDF 是一個基于 HTML5 的客戶端解決方案，用于生成各種用途的 PDF 文檔。

在項目中引入

在utils 中新建htmltopdf.js

htmlToPdf.js

// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var pdfTitle = this.pdfTitle  //pdf的名稱
      var pdfDom = document.querySelector('#pdfDom')
      html2Canvas(pdfDom, {
        allowTaint: true
      }).then(function (canvas) {
        console.log(canvas)
        const marginBottom = 34    // 項目頁面顯示微處理 以下用到的地方 可以忽略
        let canvasWidth = canvas.width 	//頁面生成canvas寬度
        let canvasHeight = canvas.height + marginBottom //頁面生成canvas高度
        let pageHeight = canvasWidth / 592.28 * 841.89 + marginBottom   //分頁 每頁的高度
        let allPageHeight = canvasHeight  // 所有頁面的高度
        let position = 0 //偏移量
        let imgWidth = 595.28 //生成canvas 圖片的寬度
        let imgHeight = 592.28 / canvasWidth * canvasHeight //生成canvas 圖片的高度
        let pageData = canvas.toDataURL('image/jpeg', 3.0)
        // console.log(canvasWidth)
        // console.log(canvasHeight)
        // console.log(pageHeight)
        // console.log(allPageHeight)
        // console.log(position)
        // console.log(imgWidth)
        // console.log(imgHeight)
        // console.log(pageData)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (allPageHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          // 循環(huán)生成分頁
          while (allPageHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            allPageHeight = allPageHeight - pageHeight - marginBottom
            position = position - 841.89 - marginBottom
            if (allPageHeight > 0) {
              PDF.addPage() //添加新的一頁
            }
          }
        }
        PDF.save(pdfTitle + '.pdf')  //保存pdf
      })
    }
  }
}

在main.ts 中全局引入

main.ts

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.ts'
import store from './store/index.js'
import * as ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import htmlToPdf from '@/utils/htmlToPdf.js'
// 使用Vue.use()方法就會調(diào)用工具方法中的install方法
Vue.use(htmlToPdf)
// import 'swiper/dist/css/swiper.css'
// import * as VueAwesomeSwiper from 'vue-awesome-swiper'
// Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vue 頁面

<template>
  <div class="transcript-container clearfix transcript-detail" @mouseenter.stop="pdfFlag = false">
    <div class="creat-pdf clearfix" @click.stop="pdfFlag = true;getPdf('#pdfDom')">下載pdf</div>
    <div id="pdfDom" class="clearfix" style="width: 210mm;margin: auto;"> </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
@Component
export default class cousrseActivity extends Vue {
  @Getter commonData
  @Action transcriptDetail
  $refs: {
    onePage: HTMLElement,
    twoPage: HTMLElement
  }
  pdfTitle: string = ''
}
</script>
//對打印 做的 兼容
<style media="print" type="text/css">
  @page {
    size: auto;
    margin: 0mm;
  }
  /* 在chrome下可以使用background屬性 */
  body {
    -webkit-print-color-adjust: exact;
  }
  @media print {
    .transcript-container.transcript-detail .transcript-wrap {
      margin-bottom: 0;
    }
  }
</style>

遇到的問題

多行省略號

多行省略號在html2canvas 時由于不能解析 display: -webkit-box; 會導致生成的圖片錯誤

.ellipsis{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 可以顯示的行數(shù)，超出部分用...表示*/
  -webkit-box-orient: vertical;
 }

目前我這邊正常顯示時使用多行省略號在打印時將 display: -webkit-box;改成display:blcok 就能正常顯示了

圖片模糊生成的pdf 不清楚

解決辦法: 將canvas的屬性width和height屬性放大為2倍，也就是，先將canvas高分辨率輸出，再來壓縮導出打印

// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var pdfTitle = this.pdfTitle
      var pdfDom = document.querySelector('#pdfDom')
      var c = document.createElement('canvas')
      html2Canvas(pdfDom, {
        useCORS: true,
        scale: 2,
        canvas: c,
        logging: true,
        width: pdfDom.width,
        height: pdfDom.height
      // allowTaint: true
      }).then(function (canvas) {
        console.log(canvas)
        const marginBottom = 34
        let canvasWidth = canvas.width
        let canvasHeight = canvas.height + marginBottom * 2
        console.log(canvasWidth)
        console.log(canvasHeight)
        let pageHeight = canvasWidth / 592.28 * 841.89 + marginBottom * 2
        let allPageHeight = canvasHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / canvasWidth * canvasHeight
        let pageData = canvas.toDataURL('image/jpeg', 3.0)
        // console.log(canvasWidth)
        // console.log(canvasHeight)
        // console.log(pageHeight)
        // console.log(allPageHeight)
        // console.log(position)
        // console.log(imgWidth)
        // console.log(imgHeight)
        // console.log(pageData)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (allPageHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (allPageHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            allPageHeight = allPageHeight - pageHeight - marginBottom
            position = position - 841.89 - marginBottom
            if (allPageHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(pdfTitle + '.pdf')
      })
    }
  }
}

處理過的圖片能清晰一點但是生成的pdf 也大了一倍