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

目录:

        一、实现步骤

        二、实现效果

代码真实可用!

一、实现步骤:

1、使用的是vue和elementUI,

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


   
   
     
     
     
     
  1. data( ) {
  2. return {
  3. previewDialog: false,
  4. attachmentSrc: '',
  5. attachmentList: [{
  6. name: 'example1.docx',
  7. path: 'https://vfdgfdsgdfsgfg/attachment/example1.docx'
  8. },
  9. {
  10. name: 'example2.pdf',
  11. path: 'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
  12. },
  13. {
  14. name: 'example3.txt',
  15. path: 'https://vfdgfdsgdfsgfg/attachment/example3.txt'
  16. },
  17. {
  18. name: 'example4.xlsx',
  19. path: 'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
  20. }]
  21. }
  22. }

2、页面代码:

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


   
   
     
     
     
     
  1. <div v-for="attachment in attachmentList">
  2. <el-link :key="attachment.path" :href="attachment.path"
  3. style= "display: inline-block;" type= "success" :underline= "false">
  4. {{ attachment.name }}
  5. el-link>
  6. <el-button type="text" style="display:inline-block;margin-left:30px;"
  7. icon= "el-icon-view" v-on:click= "previewFile(attachment)">
  8. 预览 el-button>
  9. div>
  10. <el-dialog :close-on-click-modal="true" title="文件预览" type="primary"
  11. :visible.sync= "previewDialog" width= "80%" left>
  12. <iframe :src="attachmentSrc" frameborder="0" width="100%" height="600"> iframe>
  13. <div slot="footer" class="dialog-footer">
  14. <el-button type="primary" v-on:click="previewDialog = false">关闭 el-button>
  15. div>
  16. el-dialog>

3、methods中的函数:

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

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

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

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


   
   
     
     
     
     
  1. methods: {
  2. // 预览文件
  3. previewFile( attachment) { // 根据文件格式显示预览内容
  4. const fileExtension = attachment. path. split( '.'). pop(). toLowerCase()
  5. if (fileExtension === 'xlsx' || fileExtension === 'docx') {
  6. this. attachmentSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + attachment. path
  7. } else{
  8. this. attachmentSrc = attachment. path
  9. }
  10. this. previewDialog = true
  11. }
  12. }



二、实现效果:

操作界面:

Vue通过微软官方链接预览pptx docx xlsx_第1张图片

word文件预览:

Vue通过微软官方链接预览pptx docx xlsx_第2张图片

Excel文件预览;

Vue通过微软官方链接预览pptx docx xlsx_第3张图片

PDF文件预览:

Vue通过微软官方链接预览pptx docx xlsx_第4张图片

 TXT文件预览:

Vue通过微软官方链接预览pptx docx xlsx_第5张图片

你可能感兴趣的:(vue.js,前端,excel)