vue docx-preview實作docx檔案線上預覽

        之前一般做項目進行檔案浏覽的時候基本都是用的window.open+url的形式打開檔案，進行浏覽操作的，但是這種打開方式隻能夠線上浏覽如jpg、png、pdf這類檔案，對于文檔類型docx這種則是用下載下傳的方式打開的。這次甲方爸爸不想要下載下傳了，于是就來使docx-preview這個線上預覽元件了。（這個插件隻能夠實作docx字尾的檔案，doc檔案打不開滴）

1.下載下傳插件

npm i docx-preview --save

or

yarn add docx-preview
           

2.導入

import { renderAsync } from 'docx-preview';

//一般用這種形式就行了
let docx = requie('docx-preview');

//我是vue3項目 報錯require不行 就用的下邊這種了
let docx = import.meta.glob('docx-preview');
           

3.使用元件

如圖有兩個檔案，設計點選時傳送檔案file 得到如下資料

因為之前上傳時已經限定了上傳檔案格式，是以通過fileType判斷，是圖檔檔案還是docx文檔檔案，圖檔檔案則直接傳url浏覽，文檔檔案則需處理，選擇的是将檔案通過url位址換成以下這種形式進行操作

 要渲染的元件：

<div ref="childRef" class="childRef"></div>
           

渲染文法： 

function previewfile(item) {

  if (item.fileType == '.docx') {
    nextTick(() => {
      fetch(item.filePath)
        .then((response) => {
          let docData = response.blob(); //将檔案轉換成bolb形式

           //選擇要渲染的元素
          let childRef = document.getElementsByClassName('childRef');

           //用docx-preview渲染
          renderAsync(docData, childRef[0]).then((res) => {
            console.log('res---->', res);
          });
        })
        .catch((error) => {
          console.log(error);
        });
    });
  } else {
    ImageUrl.value = toRaw(item).filePath;
  }
}
           

實作結果

這個元件渲染出來有自帶的樣式，自己修改修改樣式就行了