在
Vue中
预览docx、
doc、
pdf、xls、
xlsx文件，可以使用第三方库来实现。
对于
docx、
doc、xls、
xlsx文件，可以使用`
js-
xlsx`库来进行解析
和预览。该库可以将Excel
文件转换为
JSON格式，而对于Word
文件，可以使用`
docx.js`库来进行解析
和预览。
对于
pdf文件，可以使用`
pdf.js`库来进行
预览。该库可以通过Canvas将
PDF文件渲染成图片，然后在
Vue中显示。
下面是一个示例代码，演示如何使用上述库来
预览不同类型的
文件：
```html
<template>
<div>
<div v-if="fileType === '
docx' || fileType === '
doc'">
<div v-html="
docContent"></div>
</div>
<div v-else-if="fileType === 'xls' || fileType === '
xlsx'">
<table>
<tr v-for="row in excelData">
<td v-for="cell in row">{{ cell }}</td>
</tr>
</table>
</div>
<div v-else-if="fileType === '
pdf'">
<canvas ref="
pdfCanvas"></canvas>
</div>
</div>
</template>
<script>
import
XLSX from '
xlsx';
import
Docx from '
docx';
import
pdfjsLib from '
pdfjs-dist';
export default {
data() {
return {
fileType: '',
docContent: '',
excelData: [],
};
},
mounted() {
// 根据
文件类型进行解析
和预览
if (this
.fileType === '
docx' || this
.fileType === '
doc') {
const reader = new FileReader();
reader
.onload = (event) => {
const content = event
.target
.result;
const
doc = new
Docx();
doc.load(content);
this
.docContent =
doc.getHtml();
};
reader
.readAsArrayBuffer(this
.file);
} else if (this
.fileType === 'xls' || this
.fileType === '
xlsx') {
const reader = new FileReader();
reader
.onload = (event) => {
const content = event
.target
.result;
const workbook =
XLSX.read(content, { type: 'array' });
const sheetName = workbook
.SheetNames[0];
const worksheet = workbook
.Sheets[sheetName];
this
.excelData =
XLSX.utils
.sheet_to_
json(worksheet, { header: 1 });
};
reader
.readAsArrayBuffer(this
.file);
} else if (this
.fileType === '
pdf') {
const canvas = this
.$refs
.pdfCanvas;
const ctx = canvas
.getContext('2d');
pdfjsLib
.get
Document(this
.file)
.promise
.then((
pdf) => {
pdf.getPage(1)
.then((page) => {
const viewport = page
.getViewport({ scale: 1
.5 });
canvas
.height = viewport
.height;
canvas
.width = viewport
.width;
page
.render({
canvasContext: ctx,
viewport,
});
});
});
}
},
props: {
file: {
type: File,
required: true,
},
},
created() {
// 根据
文件后缀名判断
文件类型
const fileExtension = this
.file
.name
.split('
.')
.pop();
if (fileExtension === '
docx' || fileExtension === '
doc') {
this
.fileType = '
docx';
} else if (fileExtension === 'xls' || fileExtension === '
xlsx') {
this
.fileType = 'xls';
} else if (fileExtension === '
pdf') {
this
.fileType = '
pdf';
}
},
};
</script>
```
在上述代码中，根据
文件后缀名判断
文件类型，然后使用不同的库进行解析
和预览。对于Word
文件，使用`
docx.js`库将
文件解析为HTML格式，然后在
Vue中显示；对于Excel
文件，使用`
js-
xlsx`库将
文件解析为
JSON格式，然后在
Vue中生成表格；对于
PDF文件，使用`
pdf.js`库将
文件渲染成图片，然后在
Vue中显示。
https://mp.csdn.net/mp_blog/creation/editor/127528559
扫一扫
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
