Vue-Vorschau von PDF-/Word-/Excel-Dateien

Was hier verarbeitet wird, ist die Dateiadressen-URL, die vom Vorschau-Backend zurückgegeben wird.

1. PDF-Vorschau anzeigen

Verwenden Sie die Iframe-Verschachtelung direkt

<iframe v-if="url" :src="url" />

2. Wortvorschau

Plugins verwendendocx-preview

"docx-preview": "^0.1.4"

 npm install docx-preview

Seite:

<div ref="file" />

Js: 

import axios from 'axios'
let docx = require("docx-preview");

// ...
created(){
  readWordFromRemoteFile(this.url)
},
methods: {
  readWordFromRemoteFile(url){
     axios.request({
      method: "GET", 
      url,
      responseType: "blob",
    }).then(async(res) => {
      if (res) {
        // 这里需要的是blob
        docx.renderAsync(res.data, this.$refs.file);
      }
    }).catch((error) => {
      console.error(error);
    })
  },
}

Hinweis: Dateien vom Typ „Doc“ werden nicht unterstützt. Es wird empfohlen, für die Word-Vorschau eine Back-End-Verarbeitung durchzuführen. 

3. Excel-Vorschau anzeigen

Verwendung xlsx

"xlsx": "^0.16.0"

npm install xlsx

Seite:

<div id="excelView" v-html="excelView" />

Js: 

// 引入
import XLSX from 'xlsx'
import axios from 'axios'  
// ...
data() {
  return {
    excelView: '',
  }
},
created(){
  readExcelFromRemoteFile(this.url)
},

methods: {
  /**
   * 预览excel
   */
  readExcelFromRemoteFile(url){
    axios.request({
      method: "GET", 
      url,
      responseType: "arraybuffer",
      }).then((res) => {  
          const workbook = XLSX.read(new Uint8Array(res.data), {
          type: "array",
        }); // 解析数据
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        this.excelView = XLSX.utils.sheet_to_html(worksheet); // 渲染
        this.$nextTick(function () {
          // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。
          this.setStyle4ExcelHtml();
        });
      }).catch((error) => {
        console.error(error);
        try {
          previewFile(url)
        } catch (error) {
          console.error(error);
          this.$refs.file.innerHTML = '该文件不支持预览，请下载查看!'
        }
      })
  },
  // 设置Excel转成HTML后的样式
  setStyle4ExcelHtml() {
    const excelViewDOM = document.getElementById("excelView");
    if (excelViewDOM) {
      const excelViewTDNodes = excelViewDOM.getElementsByTagName("td"); // 获取的是HTMLConnection
      if (excelViewTDNodes) {
        const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes);
        for (const i in excelViewTDArr) {
          const id = excelViewTDArr[i].id; // 默认生成的id格式为sjs-A1、sjs-A2......
          if (id) {
            const idNum = id.replace(/[^0-9]/gi, ""); // 提取id中的数字，即行号
            if (idNum && (idNum === "1" || idNum === 1)) {
              // 第一行标题行
              excelViewTDArr[i].classList.add("class4Title");
            }
            if (idNum && (idNum === "2" || idNum === 2)) {
              // 第二行表头行
              excelViewTDArr[i].classList.add("class4TableTh");
            }
          }
        }
      }
    }
  },
}

CSS: 

/deep/ table tr td {
  border: 2px solid gray !important; 
  width: 300px !important;
  height: 33px !important;
}
/**整体样式 */
/deep/ .excel-view-container {
  background-color: #ffffff;
}
/**标题样式 */
/deep/ .class4Title {
  font-size: 22px !important;
  font-weight: bold !important;
  padding: 10px !important;
}
/**表格表头样式 */
/deep/ .class4TableTh {
  /* font-size: 14px !important; */
  font-weight: bold !important;
  padding: 2px !important;
  background-color: #ccc !important;
}

Notieren Sie es hier, falls Sie es das nächste Mal benötigen