vue使用docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能全過(guò)程

更新時(shí)間：2023年04月13日 11:44:47 作者：PinkM∞n7

文件在線預(yù)覽是目前移動(dòng)化辦公的一種新趨勢(shì),下面這篇文章主要給大家介紹了關(guān)于vue?docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

之前一般做項(xiàng)目進(jìn)行文件瀏覽的時(shí)候基本都是用的window.open+url的形式打開(kāi)文件，進(jìn)行瀏覽操作的，但是這種打開(kāi)方式只能夠在線瀏覽如jpg、png、pdf這類文件，對(duì)于文檔類型docx這種則是用下載的方式打開(kāi)的。這次甲方爸爸不想要下載了，于是就來(lái)使docx-preview這個(gè)在線預(yù)覽組件了。（這個(gè)插件只能夠?qū)崿F(xiàn)docx后綴的文件，doc文件打不開(kāi)滴）

1.下載插件

npm i docx-preview --save
or
yarn add docx-preview

2.導(dǎo)入

import { renderAsync } from 'docx-preview';
 
//一般用這種形式就行了
let docx = requie('docx-preview');
 
//我是vue3項(xiàng)目 報(bào)錯(cuò)require不行 就用的下邊這種了
let docx = import.meta.glob('docx-preview');

3.使用組件

如圖有兩個(gè)文件，設(shè)計(jì)點(diǎn)擊時(shí)傳送文件file 得到如下數(shù)據(jù)

因?yàn)橹吧蟼鲿r(shí)已經(jīng)限定了上傳文件格式，所以通過(guò)fileType判斷，是圖片文件還是docx文檔文件，圖片文件則直接傳url瀏覽，文檔文件則需處理，選擇的是將文件通過(guò)url地址換成以下這種形式進(jìn)行操作

要渲染的組件：

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

渲染語(yǔ)法：

function previewfile(item) {
 
  if (item.fileType == '.docx') {
    nextTick(() => {
      fetch(item.filePath)
        .then((response) => {
          let docData = response.blob(); //將文件轉(zhuǎn)換成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;
  }
}

實(shí)現(xiàn)結(jié)果

這個(gè)組件渲染出來(lái)有自帶的樣式，自己修改修改樣式就行了

更新一下關(guān)于樣式方面的問(wèn)題：

文檔以彈窗形式出現(xiàn)組件代碼如下

<el-dialog v-model="dialogVisible" class="dialogLarge" append-to-body :destroy-on-close="true">
    //此處是彈窗名稱
      <template #header>
        <div class="dialogHeader">
          <div>預(yù)覽</div>
        </div>
      </template>
    //此處是預(yù)覽圖片的Img組件
      <img
        w-full
        :src="dialogImageUrl"
        alt="Preview Image"
        style="height: auto; width: 100%"
        v-show="dialogImageUrl"
      />
    //此處是用于渲染docx文檔的div
      <div ref="childRef" class="childRef"></div>
</el-dialog>

生成效果如圖：

這個(gè)組件會(huì)自動(dòng)生成docx-wrapper的div盒子，有自帶的樣式

1.修改.docx-wrapper{background:white}去除灰邊

2..docx-wrapper>section.docx{box-shadow：none}去除陰影效果

屏蔽或者用!important設(shè)置section.docx自帶的高度寬度等屬性，得到符合UI要求的樣子

//vue3使用:deep(){}的形式進(jìn)行樣式穿透
//vue2是::v-deep或者/deep/的形式進(jìn)行樣式穿透
 
:deep(.docx-wrapper) {
  background-color: #fff;
  padding: 0;
}
:deep(.docx-wrapper > section.docx) {
  width: 100% !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
}

總結(jié)

到此這篇關(guān)于vue使用docx-preview實(shí)現(xiàn)docx文件在線預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)docx文件在線預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: