前端生成pdf？jspdf+html2canvas實(shí)現(xiàn)pdf預(yù)覽和導(dǎo)出

最近做后臺(tái)系統(tǒng)遇到挺多復(fù)雜的需求，比如導(dǎo)出pdf，word，excel
一般這種需求后端如果存文件，然后傳個(gè)流過來，前端就可以下載導(dǎo)出了。
但是如果后端不存文件，只返回字符串(富文本字符串)，這時(shí)候咋辦？
= =不知道，但是我遇到了，也只能頭鐵干了。


吃貨鎮(zhèn)樓

路還是有的，講一下實(shí)現(xiàn)方式：

html2canvas+jspdf

具體需求是在彈窗內(nèi)預(yù)覽，然后點(diǎn)擊下載可以生成對(duì)應(yīng)pdf，預(yù)覽pdf如果后端沒有給文件地址，只返回富文本字符串（類似"<p>123</p>"），比較難做，但是辦法還是有的,個(gè)人感覺難點(diǎn)在于html2canvas生成完整截圖的時(shí)機(jī)和pdf的分頁。
貼一下效果：


預(yù)覽彈窗
生成的pdf文件

思路：由于pdf不可直接編輯，個(gè)人思路是先將html截屏轉(zhuǎn)化成圖片，再把圖片嵌入生成pdf。

  1. html2canvas:直接npm i html2canvas -S ，用法是截圖dom然后轉(zhuǎn)化為canvas，具體api可以去github上看。
  2. jspdf（項(xiàng)目編譯報(bào)錯(cuò)所以選了個(gè)特定的版本）：https://cdn.bootcss.com/jspdf/1.5.3/jspdf.debug.js

直接貼代碼（項(xiàng)目用的是elementUI，核心代碼在preview2pdf這個(gè)方法）：

<template>
    <div class="preview-modal">
      <el-dialog class="common-dialog"  :width="width" :visible.sync="visible" @opened="openModal" @closed="hiddenModal" destroy-on-close>
            <!-- <template slot="title">
              <div class="common-modal-title">
                <span>{{title}}</span>
              </div>
            </template> -->
            <div class="preview-content">
                <div v-show="isLoading" class="loading">
                  <i class="el-icon-warning-outline"></i>正在生成
                </div>
                <div class="preview-data" style="min-height:2400px" v-if="previewDom || domData">
                      <div style="color: #333; position: relative;padding: 30px;">
                          <!-- 封面 封面頁面伸縮(預(yù)覽效果)通過調(diào)整.preview-data 的 width屬性控制-->
                          <div style="height: 1320px; padding-top: 100px;text-align: center;">
                              <h2 style="line-height: 50px;">
                                <br />
                                <span>我是豬扒封面</span>
                              </h2>
                          </div>
                            <!-- 具體正文 -->
                          <div class="edit-content" style="margin-top:20px"></div>
                      </div>
                  </div>
                <div class="error-pdf" v-else><i class="el-icon-document-delete preview-icon"></i>找不到pdf文件</div>
            </div>
          <slot name="footer">
            <template slot="footer" class="dialog-footer">
                <el-button v-if="previewDom || domData" type="primary" :disabled="isLoading" @click="downloadPDF">下載</el-button>
                <el-button v-else type="primary" @click="hiddenModal">確定</el-button>
            </template>
          </slot>
      </el-dialog>
    </div>
</template>

<script>
 import '@/utlis/html2canvas'
 import '@/utlis/jspdf.debug'
 import moment from "moment";

/*
 *@description: 預(yù)覽pdf彈窗
 *@version V1.0
 *@API:
 *@ 參數(shù) 二選一， 二選一， 二選一
 *previewDom 頁面中可看見的預(yù)覽目標(biāo)類名 （比如富文本在頁面中顯示，其容器div類名為'.fuwenben',直接傳'.fuwenben'就可以生成預(yù)覽頁面dom的pdf了）
 *domData    頁面中看不見的dom字符串（比如后臺(tái)返回富文本字符串'<div>111</div>',直接傳進(jìn)來就可以生成pdf）
 *@ 事件
 * 需要在父組件指定關(guān)閉事件 onModalHidden
 * onModalHidden(){
        this.previewDialogVisible = false
    },
*/
export default {
  name:'PreviewModal',
  props:{
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    // 預(yù)覽目標(biāo)類名
    previewDom:{
      type: String,
      default: ''
    },
    pdfName:{
      type: String,
      default:'pdf'
    },
    domData:{
      type:String,
      default:''
    },
    dateTime: {
      type: Array,
      default: () => {
        return [];
      },
    }
  },
  data(){
   return{
     visible: this.isVisible, // 將props 的屬性備份到data中
     pdfFile:null,
     isLoading:true,
   }
  },
    methods: {
    //當(dāng)前日期
    getDate() {
      let date = new Date();
      const month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : 0 + (date.getMonth() + 1);
      return date.getFullYear() + "年" + month + "月" + date.getDate() + "日";
    },
    getDateTime() {
      return (
        this.getSplit(this.dateTime[0]) + "至" + this.getSplit(this.dateTime[1])
      );
    },
    getSplit(date) {
      let arr = moment(date)
        .format("YYYY-MM-DD")
        .split("-");
      return arr[0] + "年" + arr[1] + "月" + arr[2] + "日";
    },
    /**
     * 顯示對(duì)話框
     */
    showModal() {
      // 如果是隱藏中才顯示
      if (!this.visible) { this.visible = true }
    },
    /**
     * 隱藏對(duì)話框
     */
    hiddenModal() {
      // 如果是顯示中才隱藏
        this.visible = false
        this.isLoading = true
        this.$emit('onModalHidden')
        // console.log(this.visible)
    },
    openModal(){
      this.$emit('onModalOpen')
      this.preview2pdf()
    },
    downloadPDF(){
      this.pdfFile.save(this.pdfName);
      this.$emit('downloadPDF');
    },
    // 預(yù)覽轉(zhuǎn)pdf
    preview2pdf(){
      // 非法dom直接返回
      if (!this.previewDom && !this.domData) {
        this.isLoading = false
        return
      }

      const parentDom = document.querySelector('.preview-modal')
      const contentDom = parentDom.querySelector('.preview-content')
      // 進(jìn)行截圖的dom
      const canvasDom = document.querySelector('.preview-content .preview-data')
      // 找不到這個(gè)dom元素，返回
      if(!canvasDom) {
        this.isLoading = false
        return
      }
      // 傳入富文本字符串,添加到原有的子節(jié)點(diǎn)中
      const mainBody = canvasDom.querySelector('.edit-content')

      if(mainBody) {
        // 添加內(nèi)容
        mainBody.innerHTML = `<div>${this.domData}</div>`
      } else {
        // 外部傳進(jìn)來的dom元素
        const previewDom = document.querySelector(this.previewDom)
        mainBody.append(previewDom)
      }

      // 新建ifame標(biāo)簽在線展示pdf
      const iframe = document.createElement('iframe')
      iframe.height = '99%'
      iframe.width = '100%'
      // 進(jìn)行dom截圖 必須讓dom更新完再調(diào)用
      this.$nextTick(()=>{
        html2canvas(canvasDom, {
          allowTaint: true,
          useCORS: true,
      }).then((canvas)=>{
            // 用iframe標(biāo)簽展示pdf生成預(yù)覽效果
            contentDom.appendChild(iframe)
            
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //一頁pdf顯示html頁面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html頁面高度
            var leftHeight = contentHeight;
            //頁面偏移
            var position = 0;
            //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
            var imgWidth = 555.28;
            var imgHeight = 555.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            // 取消生成狀態(tài)
            this.isLoading = false
            var pdf = new jsPDF('', 'pt', 'a4');

            //有兩個(gè)高度需要區(qū)分，一個(gè)是html頁面的實(shí)際高度，和生成pdf的頁面高度(841.89)
            //當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
            if (leftHeight < pageHeight) {
                imgWidth = 555.28;
                imgHeight = 555.28/contentWidth * contentHeight;
                pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    leftHeight -= pageHeight;
                    pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                    position -= 841.89;
                    //避免添加空白頁
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            // 保存pdf對(duì)象
            this.pdfFile = pdf
            // 生成外鏈讓iframe標(biāo)簽展示
            iframe.src = pdf.output('datauristring')
          })
        })
      }
   },
   watch:{
     isVisible(){
       this.visible = this.isVisible;
     }
   }
}
</script>

<style lang="scss">
.preview-modal{
      height:100%;

    .common-dialog{
      // height:100%;
      .el-dialog{
        margin-top: 0!important;
        height: 100%
      }
      .common-modal-title{
        width: 100%;
        height: 50px;
        margin: 10px auto 0;
        line-height: 48px;
        border-bottom: 2px solid #d8d8d8;
        box-sizing: border-box;
        font-size: 20px;
        color: #333;

        span {
          display: inline-block;
          border-bottom: 3px solid #43baca;
        }
      }
      .el-dialog__body{
        padding: 10px 40px !important;
        height: calc(100% - 75px)
      }
      .el-dialog__header{
        // padding: 30px 40px 10px;
        padding: 0;
      }
        // 預(yù)覽對(duì)話框
        .preview-content{
            overflow:hidden;
            position: relative;
            height:100%;
            .preview-data{
              // 蓋住隱藏dom height 和 width 可控制元素在pdf頁面的大小
              // min-height: 2600px;
              width: 48%;
              // width: 50%;
              font-size: 20px;
              z-index: -1;
              position: fixed;
              margin-top: -9999px;
              .edit-content{
              }
            }
            .error-pdf{
                height:100%;
                width:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:20px;
                .preview-icon{
                    font-size:36px;
                    padding-right:15px
                }
            }
            // background-color:#ff0
        }
        .loading{
          display: flex;
          justify-content: center;
          align-items: center;
          // text-align: center;
          height:100%;
          // 蓋在隱藏的canvasDom上面
          z-index: 2;
          font-size: 20px;
          i{
            color: #409EFF;
            font-size: 30px;
            padding-right: 20px;
          }
        }
        .el-dialog__footer{
          text-align: center;
          padding: 0 20px;

        }
        .dialog-footer{
            display:flex;
            justify-content: space-around;
        }
    }
  }
</style>
母豬焊接

遇到坑，注意的點(diǎn)

  1. 控制pdf頁面大小取決于html2canvas截圖dom的樣式，例子中是 .preview-data 這個(gè)類,可以觀察其中的css樣式，其中z-index為負(fù)一的原因是html2canvas截圖只能截可視dom元素，如果display：none或者是克隆出來的虛擬dom，都截不了，所以只能采取讓元素看不見的方法來取巧。

  2. 由于后臺(tái)返回的是富文本字符串，所以渲染的內(nèi)容代碼用innerHTML賦值了，賦值后dom還未渲染，此時(shí)不能立即使用html2canvas截取，需要等dom更新完成再截取，這就是調(diào)用vue.$nextTick的原因。

  3. 關(guān)于pdf分頁問題：position 這個(gè)變量控制第二頁的偏移位置，即利用偏移制造假分頁，實(shí)際上pdf渲染出來的東西都在同一頁上，只是按高度切割后，把剩余的內(nèi)容合理偏移，使得看來像分頁了而已。
    分頁參考: https://blog.csdn.net/weixin_43720095/article/details/87358705

4.預(yù)覽和下載pdf：jspdf很強(qiáng)大，有一個(gè)output('datauristring')的方法，可以生成一個(gè)dataurl外鏈，把它帶給iframe標(biāo)簽或者embed標(biāo)簽src就可以在線預(yù)覽（后臺(tái)直接返回pdf地址也是這種方法預(yù)覽），下載則更為簡(jiǎn)單，調(diào)用save方法即可。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容