狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

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

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

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

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

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

等待加載完成, doc文件也就呈現(xiàn)出來了, 這個(gè)加載相對(duì)來說非常快

二、使用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("");

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

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

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

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

我們看一下大致效果

其實(shí)我們可以加點(diǎn)樣式, 這樣就美觀了

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

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

首先需要安裝docx-preview

npm i docx-preview --save

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

import { renderAsync } from "docx-preview";

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

我們看一下效果

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

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

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

今天, 我們就講解到這里

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