前兩天更改缺陷的時候, 無意間看到了同事封裝的upload組件預(yù)覽doc文件, 效果還不錯, 就看了看用的哪種方式, 使用的 iframe + Microsoft Office Viewer服務(wù)

后面我又延伸了兩種方法, 我們一起來看看吧

一 、 iframe + Microsoft Office Viewer服務(wù)

這個如何實現(xiàn)呢, 首先需要我們先寫一個iframe容器

隨后準(zhǔn)備一個可以訪問的doc鏈接

準(zhǔn)備完畢之后, 設(shè)置相應(yīng)的寬高

將doc鏈接作為參數(shù)拼接到https://view.officeapps.live.com/op/embed.aspx后面, 這個時候, 再作為iframe的src屬性值即可

等待加載完成, doc文件也就呈現(xiàn)出來了, 這個加載相對來說非?？?/span>

二、使用mammoth.js將其轉(zhuǎn)化為HTML進(jìn)行渲染

這一種方法, 轉(zhuǎn)換之后存在樣式問題, 大家了解一下如何使用即可

首先, 我們先來安裝一下mammoth.js

npm install --save mammoth

安裝完成之后, 進(jìn)行引入

import { ref } from "vue";import mammoth from "mammoth";const docToHtml = ref("");

這時候, 創(chuàng)建了一個響應(yīng)式數(shù)據(jù), 這個數(shù)據(jù)用于接收轉(zhuǎn)換的html, 最終需要使用 v-html 進(jìn)行渲染

我們現(xiàn)在在頁面寫一個dom元素

<div v-html="docToHtml" style="width: 1000px; height: 500px"></div>

現(xiàn)在, 我們寫一個轉(zhuǎn)換邏輯, 我們只有一個在線鏈接, 需要下載一下, 最后調(diào)用 convertToHtml方法進(jìn)行轉(zhuǎn)化, 拿到數(shù)據(jù)之后, 進(jìn)行賦值即可

我們看一下大致效果

其實我們可以加點樣式, 這樣就美觀了

它將doc文件中的內(nèi)容轉(zhuǎn)化成了對應(yīng)的Html元素了

三、使用docx-preview預(yù)覽doc文件

首先需要安裝docx-preview

npm i docx-preview --save

安裝完成之后, 我們需要創(chuàng)建一個dom元素, 并引入一個 renderAsync 方法

import { renderAsync } from "docx-preview";

現(xiàn)在, 我們需要獲取blob對象, 然后在合適的時機調(diào)用上面的方法, 將blob和dom元素一并傳入即可

我們看一下效果

這三種方式實現(xiàn)word預(yù)覽, 我們已經(jīng)寫完了, 向之前推薦過vue-office的word插件, 看留言區(qū)反饋不太好, 大家可以點擊下方鏈接查看原文

Vue3借助vue-office插件實現(xiàn)word預(yù)覽

接下來, 可以給項目中封裝的upload擴展一下預(yù)覽功能了

今天, 我們就講解到這里

?來源：https://mp.weixin.qq.com/s/wpmgpK8674-xrt-D4HX_dw