前端文件预览，PDF，word，TXT

先说一下需求：

        这里要做的就是从后端返回的URL下载地址，然后前端去渲染出来

刚开始看了其他的一些博主的文章，都是不怎么适用于我，我自己找了几个新的第三方库

vue-office/pdf

官网：vue-office简介 | vue-office

这里支持docx，xlsx，PDF文件格式

mammoth.js

文档：mammoth - npm

PDF预览

我用的是vue-office/pdf这个库

<vue-office-pdf :src="src" />

//引入该库
import VueOfficePdf from '@vue-office/pdf'// 使用ref创建一个DOM引用
const src = ref('')// 简历预览
const handleChange = () => {axios({method: 'get',responseType: 'blob',url: 后端传递给你的下载文件的地址}).then(({ data }) => {// console.log(data, '后端返回') // 后端返回的是流文件pdfPrew(data)})
}// pdf文件预览
const pdfPrew = (data) => {let reader = new FileReader()reader.readAsArrayBuffer(data)reader.onload = (loadEvent) => {let arrayBuffer = loadEvent.target.resultsrc.value = arrayBuffer}
}

docx文件预览

我用的是mammoth.js

<div v-html="convertedHtml"></div>

  const convertedHtml = ref()// mammoth  word文件预览
const convertToHtml = (file) => {const reader = new FileReader()reader.onload = (event) => {const arrayBuffer = event.target.resultmammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((result) => {convertedHtml.value = result.value // 将转换后的 HTML 设置到 data 属性中}).catch((err) => console.error(err))}reader.readAsArrayBuffer(file) // 读取文件内容
}

TXT文件

对于txt文件，其实很简单，没必要去用其他的第三方库

<pre>{{ fileContent }}</pre>

 const fileContent = ref('')// 此处用于TXT文件的预览
const handleFileUpload = (file) => {if (file) {const reader = new FileReader()reader.readAsText(file, 'UTF-8')reader.onload = (e) => {fileContent.value = e.target.result}}
}