[JavaScript知识库] Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件 -> 正文阅读

[JavaScript知识库]Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

文章目录

@[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='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/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-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

JS调用（带水印）：

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