web 页面无法支持预览 Office 文档, 但是却可以预览 PDF,flash 文档, 所以大多数解决方案都是在服务端将 Office 文档转换为 PDF, 然后再通过 JS 的 PDF 预览插件 (谷歌浏览器等已经原生支持嵌入 PDF 文档) 进行查看.
Aspose
后台转换可以使用 Aspose 将 Office 文档转换为 PDF 格式, Aspose 功能强大, 支持编辑 / 转换 Word,Excel,ppt,PDF 等, 且 API 操作简便快速. Aspose 是收费的, 你需要下载破解版本.
除了 Aspose 可以编辑文档, 类似的还有 NPOI ,POI 等.
1. 利用 flexPaper 预览 swf 文件, 百度文库就是这种方式
由于现在 flash 插件用得已经很少, 此处不再赘述, 详细请看这里
2. pdfjs https://github.com/mozilla/pdf.js
pdfjs 是 Firefox 浏览器内置的 PDF 预览插件, 由于是开源的, 我们也可以使用它, IE 版本只支持 ie9/ie9+.
它通过将 PDF 转换为 html 元素再添加一些 CSS3 的样式达到 PDF 的预览效果, 文档样式与原文档几乎没有太大区别.
3. 在页面中嵌入多媒体对象 (PDF,flash,video 等)
缺点是不同的浏览器支持及呈现不一致, 比如 PDF 目前只有 webkit 浏览器原生支持嵌入, 而且移动端的 webkit 浏览器也是不支持的.
PDF 嵌入可以采用已封住好操作的插件 PDFObject, 也可以通过浏览器 API 自行编写.
vue 中解决方案
https://view.officeapps.live.com/op/view.aspx?src= 是官网提供的方法
- // 附件在线浏览
- browseOnline(row) {
- if (!/\.(PDF|PDF)$/.test(row.url)){
- // 不是 PDF 格式 使用微软提供的 Office Online 实现
- Windows.open("https://view.officeapps.live.com/op/view.aspx?src=" + row.url, '_blank');
- return false;
- } else {
- // PDF 格式
- }
- },
PDF 可以在线浏览使用 vue-PDF
NPM install --save vue-PDF
使用
- title="预览" :visible.sync="viewVisible" width="100%" height="100%" :before-close='closeDialog'>
- :src="pdfsrc">
- // 引入刚才下载的 PDF
- import PDF from 'vue-pdf'
- export default {
- components: {
- },
- data() {
- },
- created() { },
- methods: {}
- }
来源: http://www.bubuko.com/infodetail-3211919.html