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

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}`;
     }

链接: https://blog.csdn.net/genziisme/article/details/118056045?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-1-118056045-blog-131074551.235^v38pc_relevant_default_base3&spm=1001.2101.3001.4242.2&utm_relevant_index=4