vue腳手架中檢測lodop安裝情況

前言

上篇講的是lodop的基本使用，本文主要講的是lodop在vue的腳手架中使用時檢測lodop的安裝的具體情況。

正文

使用lodop插件的項目可能都需要做一個安裝情況檢測，而且官方提供的LodopFuncs.js文件中大部分代碼都是在做這個事情。如果你的項目是原生的，而且不介意在沒安裝lodop的情況下在頁面頂部展示提示的話，那不用做任何改動，使用官方提供的即可。但我的項目使用的是vue的腳手架vue-element-admin，不支持在body標簽的最上面展示提示，而且項目也不允許那樣做，所以需要根據官方提供的檢測方式，自己做更改，在此記錄。

首先要做的就是修改官方提供的js文件LodopFuncs.js，修改62行起的getLodop()函數

一是修改提示模板中的a標簽的href屬性值，這里是下載lodop中的安裝包，（此處的文件不可放在本地（vue-cli應該可以），否則會報"Module parse failed: Unexpected character..."的錯誤，因為vue-element-admin腳手架沒有配置loader的相關配置文件。解決方案就是讓后台寫個接口，或者把文件上傳阿里雲（或自己項目服務器中）之類的線上地址，然后放在a標簽的href中。）

如果你的項目文件可以放在本地，需要注意的是要用require(‘url’)來引入文件。
另外，由於腳手架做了清除默認樣式處理，所以可以給a標簽添加行內樣式還原其默認樣式：
style='color: #0000ee;text-decoration: underline;'

二是替換和刪除getLodop()方法內所有的document.body.innerHTML，如下模式：

修改前：

修改后：

然后是修改使用了打印的vue組件

在template中寫入element對話框:

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div v-html="lodopHTMLData"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">關閉</el-button>
      </span>
    </el-dialog>

　　在data的return對象中聲明如下變量:

dialogVisible: false, // 對話框展示/隱藏
lodopHTMLData: '' // 對話框內容

在mounted生命周期中寫入如下代碼：

    const _this = this
    window.flagLodop = false;
    window.lodopHTMLData = '';
    let value = ''
    // 監聽window的屬性flagLodop是否變化
    Object.defineProperty(window, 'flagLodop', {
        get(){
            return value;
        },
        set(newVal){
            _this.lodopHTMLData = lodopHTMLData // 這里的lodopHTMLData是從lodop插件的LodopFuncs.js中賦值的
            _this.dialogVisible = true
            value = newVal;
        }
    })

在調用打印方法中寫入如下代碼：

      this.LODOP = getLodop() // 獲取Lodop(必須寫在下面的計時器之前)
      let num = 1 // 存儲計時器走了幾次
      const interval = setInterval(() =>{
        if (lodopHTMLData === '') {
          num++
        } else {
          //  這里是插件異常,且彈框會彈出,所以要跳出計時器,不執行打印預覽代碼
          lodopHTMLData = ''
          clearInterval(interval)
        }
        if (num >= 5) {
          // 這里置0是為了防止下面的代碼在clearInterval之前執行時間超過100毫秒而走了下一次循環
          num = 0;
          
   // **********在此空白處寫除getLodop()外的打印相關代碼**********

          // 這里置空是為了防止此變量在下次被賦值之前有值(因為用l此變量判斷值是否為空)
          lodopHTMLData = ''
          clearInterval(interval)
        }
      }, 100)