开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

背景

对于前端必须知道的一些业务处理，预览文件在很多项目中都会用到，因此本人在这边整理了部分方法，提供给大家，相互学习，共同成长！

一.简单快速方式（url为文件下载地址,前提文件公共且公网）

各个官网提供的预览api

1.word官方预览链接（支持三种格式，不显示文档文件标题，部分word带特殊符号或流程图无法显示）

注意：该方式有一些可选参数可查看该网址view.xdocin.com/

      const routeUrl = file.url; // 文件路径
      const url = encodeURIComponent(routeUrl);
      const officeUrl = "https://view.xdocin.com/view?src=" + url;

2.office官方预览（显示文档标题，pdf不能展示）

let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url

3.谷歌官方(显示文档标题）

let officeUrl = 'https://docs.google.com/viewer?src='+url

以上几种方式建议谷歌对网络要求很高，都懂的，建议使用第一种

二.常用方式插件

1.word

npm i docx-preview --save

renderAsync API: 地址：www.npmjs.com/package/doc…

使用方式：

引入renderAsync方法
将blob数据流传入方法中，渲染word文档

<template>
  <div>
    <el-button @click="goPreview">点击预览word文件</el-button>
    <div class="docWrap">
      <div ref="file"></div>
    </div>
  </div>
</template>

<script>
// 引入docx-preview插件
let docx = require("docx-preview");
export default {
  methods: {
    goPreview() {
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: "",//文件地址
      }).then(({ data }) => {
        console.log(data);
        docx.renderAsync(data, this.$refs.file); // 渲染
      });
    },
  }
}
</script>
```

2.xlsx

此方式不太推荐，渲染没有表格，但很快很方便适合ui要求不高的情况

1.npm i xlsx@0.16.0 --save

<template>
  <div class="about">
    <button @click="preview">点击</button>
    <div>
      <div v-html="table"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import XLSX from "xlsx";

const table = ref();

const preview = () => {
  axios
    .post(
      url,//文件地址
      { responseType: "arraybuffer" }
    )
    .then(({ data }) => {
      let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
      // workbook.SheetNames 下存的该文件每个工作表名字,这里取出第一个工作表
      var worksheet = workbook.Sheets[workbook.SheetNames[0]];
      table.value = XLSX.utils.sheet_to_html(worksheet); // 渲染
    });
};

onMounted(() => {});
</script>

Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。

2.npm i luckyexcel --save

这边直接贴官方地址学习：

mengshukeji.gitee.io/LuckysheetD…

预览方式：

github.com/dream-num/L…

主要部分：

    <div
      id="mysheet"
      style="margin: 0px; padding: 0px; width: 100%; height: 100vh"
    />

// 加载 excel 文件,data:文件
LuckyExcel.transformExcelToLucky(data, (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, //表格标题
     });
   });

3.pdf

viewer.html方式请参考 github: github.com/mozilla/pdf…

pdfjs-dist方式可参考如下博客： blog.csdn.net/qq_15385627…

### 注意：pdfjs-dist兼容性坑参考以下文章 segmentfault.com/a/119000004…

以下还有一些简单的pdf在线预览插件vue-pdf请参考： blog.csdn.net/prey1025/ar…

vue 预览word,xlsx,pdf文件

背景