vue预览 pdf、word、xls、ppt、txt、csv文件方法

程序媛_MISS_zhang_0110

已于 2024-05-21 10:08:57 修改

阅读量283

点赞数 2

分类专栏： Vue 文章标签：前端

于 2024-05-10 15:03:43 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/138666929

版权

Vue 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

vue预览 pdf、word、xls、ppt、txt、csv文件方法

一、通过iframe实现预览
二、解析

一、通过iframe实现预览

       <iframe
           :src="textVisibleURl"
           frameborder="0"
           width="700"
           height="800"
       ></iframe>

二、解析

注意：1. 文件地址必须公网；2. 静态资源不要有访问权限

word、xls、ppt、pdf 这些文件要用微软官方的预览地址

 if (/\.xxxxx$/i.test(pitem.name)) {
         this.textVisibleURl = pitem.url;
         //某些格式是可以直接预览的，自己测试吧
     } else if (/\.(doc|docx|xls|xlsx|ppt|pptx|pdf)$/i.test(pitem.name)) {
         let src = pitem.url;
         // this.textVisibleURl = `https://view.officeapps.live.com/op/view.aspx?src=${src}`;
         this.textVisibleURl = `https://view.officeapps.live.com/op/embed.aspx?src=${src}`; //去掉头部一些不必要的按钮操作
     } else if (/\.csv$/i.test(pitem.name)) {
         this.textVisibleURl = `http://view.xdocin.com/xdoc?_xdoc=${pitem.url}`;
     }