前端【vue】实现文档在线预览功能，在线预览pdf、word、xls(1)

$(‘#handout_wrap_inner’).media({

width: ‘100%’,

height: ‘100%’,

autoplay: true,

src:‘http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf’,

});

三、直接通过页面内嵌iframe实现

$("<iframesrc{=}^{\prime }"+this.previewUrl+{"}^{\prime }width{=}^{\prime }100$(“.video-handouts-preview”));

此外还可以在iframe标签之间提供一个提示类似这样

This browser does not support PDFs. Please download the PDF to view it: Download PDF

四、通过标签嵌入内容

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！

与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

五、标签和iframe使用差别较小

This browser does not support PDFs. Please download the PDF to view it: Download PDF

六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

七、PDF.js demo

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

2、word、xls、ppt文件在线预览功能

---

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

/src就是要实现预览的文件地址/

/具体文档看这微软接口文档/

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总