Vue支持预览 docx格式，xlsx格式，pdf格式的文件
文章目录
- 1 预览docx格式文档
- 1.1 引入相关配置文件
- 1.2 预览docx格式文件
- 2 xlsx格式文件预览
- 2.1 引入相关配置文件 -- 如果未报错则跳过这一步
- 1.2 预览xlsx格式文件
- 3 pdf格式文件预览
- 3.1 下载所需配置包
- 3.2 预览pdf格式文件
- 如需要，请访问以下地址
- 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 workproperly without JavaScript enabled. Please enable it tocontinue.</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) {// docxrenderAsync(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格式接收的，但只需要红框里的数据，如发现报错（描述具体为不是文件等等）麻烦打印下返回值跟此图对照，如还未解决麻烦评论区留言！
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 workproperly without JavaScript enabled. Please enable it tocontinue.</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) {// xlsxLuckyExcel.transformExcelToLucky(data.data,(exportJson, luckysheetfile) => {// luckysheet.destroy(); // 卸载表格// 重新创建新表格luckysheet.create({container: "center-file", // 设定DOM容器的idtitle: "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>
3 pdf格式文件预览
- 浏览器本身是支持
pdf格式文件预览的，除非想在界面里内嵌一个区域。
3.1 下载所需配置包
特别注意：vue-pdf需要文档的http地址
npm i vue-pdf
3.2 预览pdf格式文件
<template><div class="center"><pdfref="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>