vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览

vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览

一，word预览（.doc/.docx）：

1. npm下载插件
2. npm i docx-preview@0.1.4
3. npm i jszip

//vue3中es6方式引入
<template>
	<!-- 测试word -->
	<div @click='yulan'>预览</div>
	<n-modal
        v-model:show="previewOptions.showModal"
        style="width: 800px"
        class="custom-card"
        preset="card"
        title="previewOptions.title"
        size="huge"
        :bordered="false"
      >
    	<div ref="word"></div>
    </n-modal>
<template>
<script setup>
	//引入方式
	import axios from 'axios'
	import { renderAsync } from 'docx-preview'
	import XLSX from 'xlsx'
	window.JSZip = JSZip
	//声明dom中的word
	let word = ref(null)
	function yulan(){
		if (['doc', 'docx'].includes(type)) {
			//先显示弹框
		    previewOptions.value.showModal = true
		    //使用插件
		    axios({
		      method: 'get',
		      responseType: 'blob', // 设置响应文件格式
		      url: 'docx',
		    }).then(({ data }) => {
		      renderAsync(data, word.value) // 渲染到页面预览
		    })
		    return
		  }
	}
</script>

二，excel文件预览（.xls/.xlsx）

1. import XLSX from ‘xlsx’

<template>
	<!-- 测试word -->
	<div @click='yulan'>预览</div>
	<div v-html="tableau"></div>
</template>
<script setup>
import XLSX from 'xlsx'

let tableau = ref(null)
function yulan(){
	if (['xls', 'xlsx'].includes(type)) {
	    previewOptions.value.showModal = true
	    axios
	      .get('http://42.193.105.146:9000/nt1/test/test.xlsx', {
	        responseType: 'arraybuffer', // 设置响应体类型为arraybuffer
	      })
	      .then(({ data }) => {
	        let workbook = XLSX.read(new Uint8Array(data), { type: 'array' }) // 解析数据
	        var worksheet = workbook.Sheets[workbook.SheetNames[0]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
	        tableau.value = XLSX.utils.sheet_to_html(worksheet) // 渲染
	      })
	    return
	  }
}
</script>

三，pdf文件预览

window.open(url)

四，mp3/mp4

<template>
<!-- mp3 -->
<audio v-else-if="previewOptions.type === 'audio'" controls :src="previewOptions.resourcePath"></audio>
<!-- mp4 -->
<video v-else-if="previewOptions.type === 'video'" controls :src="previewOptions.resourcePath"></video>
</template>

五，ppt，word，excel，txt，pdf都可以预览

<template>
	<!-- 预览ppt -->
	<div @click='yulan'>预览</div>
	<iframe :src="iframeUrl" frameborder="0" width="100%" height="600"></iframe>
</template>
<script setup>
let iframeUrl = ref(null)
function yulan(){
	//文档转换地址http://view.xdocin.com/xdoc?_xdoc=
	let url = 'http://view.xdocin.com/xdoc?_xdoc=' + 'url'
    iframeUrl.value = url
}
</script>