在我们工作时,经常会有在线查看各种不同类型的文件的需要,如Word文档、Excel表格、PowerPoint幻灯片和PDF等。可以直接在这里预览:https://www.compdf.com/webviewer/demo
Word 文件实现前端预览
方案一:
使用 XDOC 可以实现预览以 DataURI 表示的 word 文档,此外 XDOC 还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档
下面是使用 XDOC 实现预览 DOCX 文档的代码示例:
注意:文档地址要用utf-8编码,并且外网可访问
示例代码:
window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx"));
方案二:
使用 docx-preview 开源组件实现 word 文件预览
-
npm 安装 docx-preview
-
获取 word文档 blob 数据流
-
调用 docx-preview 提供的 renderAsync 方法,并将获取的 blob 数据流传入方法中,渲染word文档
示例代码:
import Axios from "axios";
import { renderAsync } from "docx-preview";
Axios.get('文档下载路径',{
responseType: 'blob'
}).then(({data}) => {
renderAsync(data, document.getElementById("container")) // 渲染到页面
})
Excel 文件实现前端预览
-
使用 npm 命令安装库:
npm i exceljs handsontable @handsontable/vue
-
使用 exceljs 解析数据,通过
workbook.getWorksheet
方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据 -
引入
@handsontable/vue
的组件HotTable -
通过settings属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览
<template>
<input type="file" @hange='handleFile' />
<hot-table :settings="hotSettings"></hot-table>
</template>
<script setup>
import Excel from 'exceljs';
import { HotTable } from "@handsontable/vue";
import { ref } from 'vue';
const data = ref([]);
const handleFile = (e) => {
const file = e.target.files[0];
const workbook = new Excel.Workbook();
await workbook.xlsx.load(file)
// 第一个工作表
const worksheet = workbook.getWorksheet(1);
// 遍历工作表中的所有行(包括空行)
data.value = worksheet.getRows(1, worksheet.actualRowCount);
})
const hotSettings = {
language: "zh-CN",
readOnly: true,
data: data.value,
mergeCells: this.merge,
colHeaders: true,
rowHeaders: true,
height: "auto",
outsideClickDeselects: false,
licenseKey: "non-commercial-and-evaluation"
}
</script>
PowerPoint 文件实现前端预览
使用 jszip 和 pptxjs 实现 PowerPoint 文件预览
<div id="slide-resolte-contaniner" ></div>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jszip.min.js"></script> <!-- v2.. , NOT v.3.. -->
<script type="text/javascript" src="./js/filereader.js"></script> <!--https://github.com/meshesha/filereader.js -->
<script type="text/javascript" src="./js/d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/nv.d3.min.js"></script> <!-- for charts graphs -->
<script type="text/javascript" src="./js/pptxjs.js"></script>
<script type="text/javascript" src="./js/divs2slides.js"></script> <!-- for slide show -->
<script>
$("#slide-resolte-contaniner").pptxToHtml({
pptxFileUrl: "Sample_demo1.pptx",
slidesScale: "50%",
slideMode: false,
keyBoardShortCut: false
});
</script>
PDF 文件实现前端预览
使用 ComPDFKit PDF SDK 实现 PDF 文件的在线预览
第一步:添加 ComPDFKit PDF SDK 包
-
将 @compdfkit 文件夹添加到项目的 根 目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件,并将它导入到您的项目中。
-
将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。
第二步:显示PDF文档
-
将 @compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。
-
调用
ComPDFKitViewer.init()
在您的项目中初始化 ComPDFKit Web Viewer。 -
将要显示的 PDF 地址和许可证密钥传递给 init 函数
// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
pdfUrl: 'Your PDF Url',
license: 'Input your license here'
}, viewer)
.then((core) => {
const docViewer = core.docViewer;
docViewer.addEvent('documentloaded', () => {
console.log('ComPDFKit Web Viewer loaded');
})
})
- 项目运行后,您就可以看到要显示的 PDF 文件了。