位置: IT常识 - 正文

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件(vue使用方法)

编辑：rootadmin

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件文章目录@[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器（微软的开发接口）方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)方法一、 Luckysheet 预览

推荐整理分享【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件(vue使用方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue功能实现,vue到底怎么用,vue实战技巧,vue的使用教程,vue实战技巧,vue到底怎么用,vue的使用教程,vue的使用教程,内容如对您有帮助，希望把文章链接给更多的朋友！

Luckysheet 是一个类似于 excel 的在线电子表格，功能强大、配置简单且完全开源。安装 Luckysheet 1、通过CDN引入依赖由于 Luckysheet 现在还没有发布出模块化的开发，不能使用 npm，所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件，在里面添加如下代码

2、指定表格容器

<template> <div class="hello"> <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, data() { }, mounted() { // 创建表格 window.luckysheet.create({ container: 'mysheet' // 设定表格容器的id }); }, methods: { } }</script>

3、安装 Luckyexcel 注意：Luckyexcel 只能读取 .xlsx 格式数据，无法读取 .xls 格式数据。

npm install luckyexcel

4、完整代码

注意：若 xlsx 文件使用的是通过 wps 创建的，嵌入式的图片无法正常显示，而是显示类似 =DISPIMG(“图片 1(1)”,1) 这样的文字。原因：WPS 表格里插入的嵌入式图片是 =DISPIMG 格式( wps 特有的功能)，它不是 vshape，在 shapes 集合中找不到，只能用 wps 的 et 表格打开才能看到这个图片。解决办法：在 wps 右键切换为浮动图片<template> <div class="hello"> <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div> </div></template><script> import LuckyExcel from 'luckyexcel' export default { name: 'about', props: { msg: String }, data() {}, mounted() { // 创建表格 // window.luckysheet.create({ // container: 'mysheet' // 设定DOM容器的id // }); // 加载 excel 文件 LuckyExcel.transformExcelToLuckyByUrl( "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/30/zG4ZPphpTiDPkG1653875854220530.xlsm", "", (exportJson, luckysheetfile) => { console.log(exportJson); console.log(luckysheetfile); if (exportJson.sheets == null || exportJson.sheets.length == 0) { alert("文件读取失败!"); return; } // 销毁原来的表格 window.luckysheet.destroy(); // 重新创建新表格 window.luckysheet.create({ container: 'mysheet', // 设定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 //表格标题 }); }); }, methods: {} }</script>

方法二、 Office Web 查看器（微软的开发接口）

直接在浏览器中打开 Word、PowerPoint 或 Excel 文件，将下载链接转换为 Office Web Viewer 链接以在您的网站或博客中使用注意: 在 SharePoint 2019 中，可插入的文件类型仅限于 Word、Excel 和 PowerPoint (，.doc、.docx。 xls、.xlsx、.pot、.potx、.ppt 和 .pptx) 。优点

没有 Office也可以直接查看Office 文件适用于移动端、PC无需下载文件就可以在浏览器中查看 Vue预览word，excel，pptx，pdf文件let docUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'let url = encodeURIComponent(docUrl)let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url// 在新窗口打开编码后的链接window.open(officeUrl,'_target')方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)

XDOC文档预览云服务注意：文档地址要用utf-8编码，并且外网可访问。优点：

只需要传入文档URL，基于内容自动识别文档格式高效、快速、实时预览，重复请求0毫秒响应使用HTML5方式展现内容，同时适配PC端和移动端支持PDF,OFD,DOC/X,XLS/X,PPT/X,JPG,MP4等多种文档格式

调用方法

https://view.xdocin.com/view?src=文档地址

JS调用： https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件(vue使用方法)

JS调用（带水印）：

window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx") + "&watermark=" + encodeURIComponent("view.xdocin.com"));