效果预览
word预览
使用docx-preview实现
npm install docx-preview
主要代码实现
html
<div ref="docsRef" id="fileView"> </div>
TS
const docsRef = ref<HTMLElement>();
const docView = (url) => {
fileVisible.value = true;
axios({
method: 'GET',
responseType: 'blob',
url: url,
}).then((res) => {
renderAsync(res.data, docsRef.value as unknown as HTMLElement, null, {
className: 'docx', // 默认和文档样式类的类名/前缀
inWrapper: true, // 启用围绕文档内容渲染包装器
ignoreWidth: false, // 禁止页面渲染宽度
ignoreHeight: false, // 禁止页面渲染高度
ignoreFonts: false, // 禁止字体渲染
breakPages: true, // 在分页符上启用分页
ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
experimental: false, //启用实验性功能（制表符停止计算）
trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
debug: true, // 启用额外的日志记录
});
});
};
Excel预览
使用luckyexcel实现
npm i luckyexcel
主要代码
在index.html中添加
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<!-- globally import the style files and js files of luckysheet at here -->
<!-- 在这里全局引入luckysheet的样式文件和js文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css"
/>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
TS
import LuckyExcel from 'luckyexcel';
const excelView = (url) => {
fileVisible.value = true;
// 加载 excel 文件
LuckyExcel.transformExcelToLuckyByUrl(url, '', (exportJson, luckysheetfile) => {
if (exportJson.sheets == null || exportJson.sheets.length == 0) {
message.error('文件读取失败!');
return;
}
// 销毁原来的表格
window.luckysheet.destroy();
// 重新创建新表格
window.luckysheet.create({
container: 'fileView', // 设定DOM容器的id
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showstatisticBar: false, // 是否显示底部计数栏
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 是否允许增加行
enableAddCol: false, // 是否允许增加列
sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: false, //返回头部按钮
data: exportJson.sheets, //表格内容
title: exportJson.info.name, //表格标题
});
});
};
