vue 预览 word_vue预览word

    // 将file转为buffer
    let fr = new FileReader();
    fr.readAsArrayBuffer(content.file);
    fr.addEventListener("loadend",(e) => {
        console.log("loadend---->", e)
        let buffer = e.target.result;
        this.docxRender(buffer);
    },false);
   

    
   
  }
  //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
  else if (["png", "jpg", "jpeg","bmp"].includes(addType)) {
    this.xzbjPreviewIframeSrc = "";
    this.xzbjIframeIsShow = false;
    this.xzbjDocPreviewFlag = false;
    this.imgPreview(content.file);
    
    this.previewBoxStyle = "height:400px;position: relative;overflow:auto;"
    
  } else if (addType === "rar" || addType === "zip" || addType === "7z") {
    this.filePreviewInfo = "请下载附件进行查看"
    this.xzbjPreviewImgUrl = "";
    this.xzbjPreviewIframeSrc = "";
    this.xzbjDocPreviewFlag = false;
    this.xzbjDialogPreviewDiv = true;
    this.$message({
      message: "该文件类型暂不支持预览",
      type: "warning",
    });
    return false;
  }else{
    this.filePreviewInfo = "该文件类型暂不支持预览"
    this.xzbjPreviewIframeSrc = "";
    this.xzbjIframeIsShow = false;
    this.xzbjDialogPreviewDiv = true;
    this.xzbjPreviewImgUrl = "";
    this.xzbjDocPreviewFlag = false;
    this.$message({
      message: "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",
      type: "warning",
    });
  }
}


// 渲染docx
docxRender(buffer) {
let bodyContainer = document.getElementById(“demoDocContainer”);
renderAsync(
buffer, // Blob |

  • 20
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,我们可以使用axios库来进行HTTP请求,包括获取post请求的二进制流数据。下面是一个示例代码,演示如何使用axios来获取post请求中的二进制流数据。 ```javascript // 引入axios库 import axios from 'axios' // 在Vue组件中定义一个方法来获取post请求的二进制流数据 methods: { getBinaryData() { axios.post('/api/getBinaryData', {}, { responseType: 'blob' // 设置响应类型为二进制流 }) .then(response => { const blobData = response.data // 对获取的二进制流数据进行处理 // 例如,可以将二进制流转化为图片显示 const imageSrc = URL.createObjectURL(blobData) const imgElement = document.createElement('img') imgElement.src = imageSrc document.body.appendChild(imgElement) }) .catch(error => { console.error(error) }) } } ``` 上述代码中的`getBinaryData`方法定义了一个POST请求用于获取二进制流数据。在axios的POST请求中,我们设置了`responseType`选项为'blob',这表示返回的响应数据将以二进制流的形式接收。 在获取到二进制流数据后,我们可以对其进行自定义处理。在示例代码中,我们将二进制流数据转化为图片,并将其添加到页面中进行显示。 注意,上述代码中的'/api/getBinaryData'是一个示例的请求地址,你需要将其替换为你真正的后端接口地址。另外,还可能需要根据你的具体需求进行适当的修改和扩展。 总结起来,Vue中可以使用axios库来获取post请求的二进制流数据。通过设置axios请求的`responseType`选项为'blob',可以确保响应数据以二进制流的形式接收。获取到二进制流数据后,我们可以对其进行自定义处理,例如转化为图片等操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值