前端实现预览word、excel、pdf、ppt文件

最近遇到一个需要同时支持预览word、excel、pdf、ppt的需求，在此记录一下，目前只是简单实现预览的功能，没有作深入的了解。

1.非常简单的一个方法如下（亲测同时支持word、excel、pdf、ppt文件类型）, 详情可查看文档

//file_url是你的文件地址
<a
  href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=file_url"
  target="_blank"
  rel="nofollow"
>预览</a>

2. 一些针对专门文件类型的库 

1)针对excel的 sheetjs , 通过其实现简单预览excel的代码如下（注：预览效果没有第一种方法好）

<div id="result"></div>

npm install js-xlsx

import XLSX from "js-xlsx";
import axios from "axios";

readWorkbook(workbook) {
      var sheetNames = workbook.SheetNames; // 工作表名称集合
      var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
      var csv = XLSX.utils.sheet_to_csv(worksheet);
      document.getElementById("result").innerHTML = this.csv2table(csv);
    },
    csv2table(csv) {
      var html = "<table>";
      var rows = csv.split("\n");
      rows.pop(); // 最后一行没用的
      rows.forEach(function(row, idx) {
        var columns = row.split(",");
        columns.unshift(idx + 1); // 添加行索引
        if (idx == 0) {
          // 添加列索引
          html += "<tr>";
          for (var i = 0; i < columns.length; i++) {
            html +=
              "<th>" +
              (i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
              "</th>";
          }
          html += "</tr>";
        }
        html += "<tr>";
        columns.forEach(function(column) {
          html += "<td>" + column + "</td>";
        });
        html += "</tr>";
      });
      html += "</table>";
      return html;
    },
    //url为文件地址， 需要预览时调用previewExcel方法传入文件地址即可
    previewExcel(url) {
      axios({
        url,
        method: "GET",
        responseType: "arraybuffer"
      }).then(res => {
        var data = new Uint8Array(res.data);
        var workbook = XLSX.read(data, { type: "array" });
        this.readWorkbook(workbook);
      });
    }

2）通过pdf.js实现预览pdf文件(注：简单来看 效果和第一种方式是一样的)

如果看文档一下不知道怎么用的话，可以把vue-pdfjs-demo这个项目拷贝下来 运行下 再把其static里面的pdf文件夹拷贝放入你的项目静态资源目录下（如vue下面的 public 或者 static目录）。使用方法如下：

//需要预览时调用onViewPDF方法即可
onViewPDF() {
    //url为文件地址
   window.open(`/pdf/web/viewer.html?file=${url}`);
}

主要参考文章：

前端实现在线预览pdf、word、xls、ppt等文件
如何使用JavaScript实现纯前端读取和导出excel文件