H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue可以实现word和excel的预览吗?

上传下载功能都已经实现了,图片和pdf的预览也实现了,但是word和excel的预览 网上大部分都是如同微软那样的,提供网址,进行访问的,或者就是单独起一个别人公司开发的服务进行解析,我想问问各位大佬,目前可以实现和图片、pdf类似的方式进行展示吗? 只需要展示出来 不需要在线修改什么的。

回答:

Excel: SheetJS
Word: mammoth.js

当然,如果你的文档都是公网可以访问的,可以用微软提供的在线预览

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

回答:

请问楼主解决了吗?

回答:

我正在使用sheetjs解析xls文件 记录一下。axios获取[局域网]存储端的文件,并将这个文件解析。生成的html用 v-html 预览 <div v-html="excel2html()"></div>

excel2html() {  
  var vm = this;  
  this.$ajax  
  .get(this.source,{  
    responseType: 'blob'  
  })  
  .then((response) => {  
    var reader = new FileReader();  
    reader.onload = e => {  
      //预处理  
      var binary = '';  
      var buf = new Uint8Array(e.target.result);  
      var length = buf.byteLength;  
      for (var i = 0; i < length; i++) {  
      binary += String.fromCharCode(buf[i]);  
    }  //读取excel  
      const wb = xlsx.read(binary, {type: "binary"});  
      console.log("wb",wb);  
      //抓取第一个sheet  
      let wsname = wb.SheetNames[0];  
      let ws = wb.Sheets[wsname];
      // setContent 是用来赋值 this.fileContent = xlsx.utils.sheet_to_html(ws)
      vm.setContent(xlsx.utils.sheet_to_html(ws))  
     };  
        reader.readAsArrayBuffer(response.data);  
    }) 
  .catch(error => {  
    console.log(error);  
   });  
 return this.fileContent;  
},

回答:

如果需要可以修改咋写呢

本文地址:H5W3 » vue可以实现word和excel的预览吗?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址