日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

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

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

一 、 iframe + Microsoft Office Viewer服務

這個如何實現呢, 首先需要我們先寫一個iframe容器

隨后準備一個可以訪問的doc鏈接

準備完畢之后, 設置相應的寬高

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

等待加載完成, doc文件也就呈現出來了, 這個加載相對來說非常快

二、使用mammoth.js將其轉化為HTML進行渲染

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

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

npm install --save mammoth

安裝完成之后, 進行引入

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

這時候, 創建了一個響應式數據, 這個數據用于接收轉換的html, 最終需要使用 v-html 進行渲染

我們現在在頁面寫一個dom元素

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

現在, 我們寫一個轉換邏輯, 我們只有一個在線鏈接, 需要下載一下, 最后調用 convertToHtml方法進行轉化, 拿到數據之后, 進行賦值即可

我們看一下大致效果

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

它將doc文件中的內容轉化成了對應的Html元素了

三、使用docx-preview預覽doc文件

首先需要安裝docx-preview

npm i docx-preview --save

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

import { renderAsync } from "docx-preview";

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

我們看一下效果

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

Vue3借助vue-office插件實現word預覽

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

今天, 我們就講解到這里

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