Vue通过微软官方链接预览pptx docx xlsx

目录：

        一、实现步骤

        二、实现效果

代码真实可用！

一、实现步骤：

1、使用的是vue和elementUI，

假设有这些变量：attachment是附件的意思

   
   

     
     

      
      

     
     
     
     

      
      

       
       data(
       
       ) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       previewDialog: 
       
       false,
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       attachmentSrc: 
       
       '',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       attachmentList: [{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       name: 
       
       'example1.docx',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       path: 
       
       'https://vfdgfdsgdfsgfg/attachment/example1.docx'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       name: 
       
       'example2.pdf',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                
       
       path: 
       
       'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       name: 
       
       'example3.txt',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       path: 
       
       'https://vfdgfdsgdfsgfg/attachment/example3.txt'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    },
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                 
       
       name: 
       
       'example4.xlsx',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
                  
       
       path: 
       
       'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                    }]
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         }
      
      
     
     
   
   

    
    
   
   
   
   

2、页面代码：

主要是用 iframe 组件，src地址即为要展示的文件地址

   
   

     
     

      
      

     
     
     
     

      
      

       
       <!-- 这段代码是界面显示 -->
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <div v-for="attachment in attachmentList">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       <el-link :key="attachment.path" :href="attachment.path"
      
      
     
     

     
     

      
      

     
     
     
     

      
      
           
       
       style=
       
       "display: inline-block;"  
       
       type=
       
       "success" 
       
       :underline=
       
       "false">
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                {{ attachment.name }}
      
      
     
     

     
     

      
      

     
     
     
     

      
      
      
       
       </el-link>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
     
       
       <el-button type="text" style="display:inline-block;margin-left:30px;" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       icon=
       
       "el-icon-view" 
       
       v-on:click=
       
       "previewFile(attachment)">
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               预览
       
       </el-button>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <!-- 点击上面的预览按钮会弹出文件预览框 -->
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       <el-dialog :close-on-click-modal="true" title="文件预览" type="primary" 
      
      
     
     

     
     

      
      

     
     
     
     

      
      
   
       
       :visible.sync=
       
       "previewDialog"  
       
       width=
       
       "80%" 
       
       left>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <iframe :src="attachmentSrc" frameborder="0" width="100%" height="600">
       
       </iframe>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       <div slot="footer" class="dialog-footer">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       <el-button type="primary" v-on:click="previewDialog = false">关闭
       
       </el-button>
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </el-dialog>
      
      
     
     
   
   

    
    
   
   
   
   

3、methods中的函数：

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

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

最后，你控制的只是src地址

微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

   
   

     
     

      
      

     
     
     
     

      
      

       
       methods: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       // 预览文件
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       previewFile(
       
       attachment) {
       
       // 根据文件格式显示预览内容
      
      
     
     

     
     

      
      

     
     
     
     

      
      
         
       
       const fileExtension = attachment.
       
       path.
       
       split(
       
       '.').
       
       pop().
       
       toLowerCase()
      
      
     
     

     
     

      
      

     
     
     
     

      
      
         
       
       if (fileExtension === 
       
       'xlsx' || fileExtension === 
       
       'docx') {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       this.
       
       attachmentSrc = 
       
       'https://view.officeapps.live.com/op/view.aspx?src=' + attachment.
       
       path
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                }
       
       else{
      
      
     
     

     
     

      
      

     
     
     
     

      
      
             
       
       this.
       
       attachmentSrc = attachment.
       
       path
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
                }
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       this.
       
       previewDialog = 
       
       true
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

二、实现效果：

操作界面：

word文件预览：

Excel文件预览；

PDF文件预览：

 TXT文件预览：