- 如需要，请访问以下地址
- docx-preview, luckyexcel 配置文件与node服务仓库地址
1 预览docx格式文档
配置文件存放位置
1.1 引入相关配置文件
docx预览会使用
docx-preview-
如果直接使用
npm包，当解析时出现如下错误的话，就使用下面的方法，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。
效果图 直接把
docx-preview打包后的代码直接引入到入口文件里 -- 如果未报错则跳过这一步
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>static/config.js"></script>
<!--------docx-preview配置文件--------->
<script src="./docxPreview/polyfill.min.js"></script>
<script src="./docxPreview/jszip.min.js"></script>
<script src="./docxPreview/docx-preview.min.js"></script>
<script src="./docxPreview/docx-preview.min.js.map"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
docx-previewgithub地址： https://github.com/VolodymyrBaydalka/docxjs
1.2 预览docx格式文件
<template>
<div class="center">
<div class="center-file" id="center-file">
</div>
</template>
<script>
import { defaultOptions, renderAsync } from "docx-preview";
import axios from "axios";
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {
this.init();
},
methods: {
init() {
axios({
method: "GET",
url: "http://127.0.0.1:8899/file",
params: {},
responseType: "blob",
}).then(function (data) {
// docx
renderAsync(data.data, document.getElementById("center-file"), null, {
className: "docx", // 默认和文档样式类的类名/前缀
inWrapper: false, // 启用围绕文档内容渲染包装器
ignoreWidth: false, // 禁止页面渲染宽度
ignoreHeight: false, // 禁止页面渲染高度
ignoreFonts: false, // 禁止字体渲染
breakPages: false, // 在分页符上启用分页
ignoreLastRenderedPageBreak: false, //禁用lastRenderedPageBreak元素的分页
experimental: false, //启用实验性功能（制表符停止计算）
trimXmlDeclaration: false, //如果为真，xml声明将在解析之前从xml文档中删除
debug: false, // 启用额外的日志记录
});
});
},
},
mounted() {},
};
</script>
<style scoped lang="scss">
.center {
width: 100%;
height: 100%;
background-color: #efefef;
padding: 24px;
box-sizing: border-box;
.center-file {
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
}
</style>
-
特别注意：返回值是用的 blob格式接收的，但只需要红框里的数据，如发现报错（描述具体为不是文件等等）麻烦打印下返回值跟此图对照，如还未解决麻烦评论区留言！
注意点，下面的同理
docx效果图
2 xlsx格式文件预览
xlsx预览会使用
luckyexcel-
如果直接使用
npm包，当出现如下错误时，使用以下解决方案，如果没报错，就正常引入使用即可，不需要把打包后的代码引入到入口文件里。
效果图 直接把
luckyexcel打包后的代码直接引入到入口文件里
2.1 引入相关配置文件 -- 如果未报错则跳过这一步
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="<%= BASE_URL %>static/config.js"></script>
<!---------luckyexcel 配置文件-------->
<link rel="stylesheet" href="./luckyexcelConfig/pluginsCss.css" />
<link rel="stylesheet" href="./luckyexcelConfig/plugins.css" />
<link rel="stylesheet" href="./luckyexcelConfig/luckysheet.css" />
<link rel="stylesheet" href="./luckyexcelConfig/iconfont.css" />
<script src="./luckyexcelConfig/plugin.js"></script>
<script src="./luckyexcelConfig/luckysheet.umd.js"></script>
<script src="./luckyexcelConfig/luckysheet.umd.js.map"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
luckyexcelgithub地址： https://github.com/dream-num/Luckyexcel
1.2 预览xlsx格式文件
<template>
<div class="center">
<div class="center-file" id="center-file">
</div>
</template>
<script>
import LuckyExcel from "luckyexcel";
import axios from "axios";
export default {
name: "",
props: {},
components: {},
data() {
return {};
},
computed: {},
watch: {},
created() {
this.init();
},
methods: {
init() {
axios({
method: "GET",
url: "http://127.0.0.1:8899/file",
params: {},
responseType: "blob",
}).then(function (data) {
// xlsx
LuckyExcel.transformExcelToLucky(
data.data,
(exportJson, luckysheetfile) => {
// luckysheet.destroy(); // 卸载表格
// 重新创建新表格
luckysheet.create({
container: "center-file", // 设定DOM容器的id
title: "luckysheet", //表 头名
lang: "zh", //中文
plugins: ["chart"],
showinfobar: false, // 是否显示顶部信息栏
// showstatisticBar: false, // 是否显示底部计数栏
// allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 是否允许增加行
enableAddCol: false, // 是否允许增加列
// sheetFormulaBar: false, // 是否显示公式栏
// enableAddBackTop: false, //返回头部按钮
data: exportJson.sheets, //表格内容
// showtoolbar: false, // 是否显示工具栏
title: exportJson.info.name, //表格标题
});
}
);
});
},
},
mounted() {},
};
</script>
<style scoped lang="scss">
.center {
width: 100%;
height: 100%;
background-color: #efefef;
padding: 24px;
box-sizing: border-box;
.center-file {
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
}
</style>
xlsx效果图
2 pdf格式文件预览
- 浏览器本身是支持
pdf格式文件预览的，除非想在界面里内嵌一个区域。
1.1 下载所需配置包
特别注意：vue-pdf需要文档的http地址
npm i vue-pdf
1.2 预览pdf格式文件
<template>
<div class="center">
<pdf
ref="pdf"
v-for="i in numPages"
:key="i"
:src="url"
:page="i"
></pdf>
</div>
</template>
<script>
import axios from "axios";
import pdf from "vue-pdf";
export default {
name: "",
props: {},
components: {},
data() {
return {
url: null,
numPages: null,
};
},
computed: {},
watch: {},
created() {
this.init();
},
methods: {
init() {
axios({
method: "GET",
url: "http://127.0.0.1:8899/file",
params: {},
responseType: "blob",
}).then(function (data) {
// pdf
// vue-pdf 包不允许本地localhost与任何地址进行访问--发到服务器这个问题自然就没了
// 文件流里会自带服务端文件地址，如不理解请翻到1.2区域返回值展示图（特别注意红字下那个图）此处不再贴图。
this.url = data.config.url;
let loadingTask = pdf.createLoadingTask(this.url);
loadingTask.promise
.then((pdf) => {
this.numPages = pdf.numPages;
})
.catch((err) => {
console.error("pdf 加载失败", err);
this.$message.error("pdf 加载失败");
});
});
},
},
mounted() {},
};
</script>
<style scoped lang="scss">
.center {
width: 100%;
height: 100%;
background-color: #efefef;
padding: 24px;
box-sizing: border-box;
.center-file {
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
}
</style>
