最近遇到一个需要同时支持预览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}`);
}
主要参考文章: