1000字范文 > 【Vue实用功能】Vue实现文档预览功能预览PDF Word Excel ppt等office文件

【Vue实用功能】Vue实现文档预览功能预览PDF Word Excel ppt等office文件

时间：2022-10-14 09:36:56

文章目录

@[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器（微软的开发接口）方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)

方法一、 Luckysheet 预览

Luckysheet 是一个类似于 excel 的在线电子表格，功能强大、配置简单且完全开源。

安装 Luckysheet

1、通过CDN引入依赖

由于 Luckysheet 现在还没有发布出模块化的开发，不能使用 npm，所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件，在里面添加如下代码

<link rel='stylesheet' href='/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='/npm/luckysheet@latest/dist/plugins/plugins.css' /><link rel='stylesheet' href='/npm/luckysheet@latest/dist/css/luckysheet.css' /><link rel='stylesheet' href='/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' /><script src="/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script><script src="/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

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-/measurement/-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容器的idshowtoolbar: 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 中，可插入的文件类型仅限于 Word、Excel 和 PowerPoint (，.doc、.docx。 xls、.xlsx、.pot、.potx、.ppt 和 .pptx) 。

优点

没有 Office也可以直接查看Office 文件适用于移动端、PC无需下载文件就可以在浏览器中查看

Vue预览word，excel，pptx，pdf文件

let docUrl = '/file/download?filename=file.obj_id'let url = encodeURIComponent(docUrl)let officeUrl = 'http://view./op/view.aspx?src='+url// 在新窗口打开编码后的链接window.open(officeUrl,'_target')