后端返回BASE64格式word文档在线预览

使用docx-preview插件来实现word文档预览
先npm i docx-preview --save

<!-- 文件预览 -->
    <el-dialog title="预览" :visible.sync="previewFile" width="50%">
      <div class="fileView">
        <div ref="fileView"></div>
      </div>
    </el-dialog>
// 处理word方法
handlePrimay(row) {
        this.previewFile = true;
        var raw = window.atob(row.url);
        var uInt8Array = new Uint8Array(raw.length);
        for (var i = 0; i < raw.length; i++) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        const blob = new Blob([uInt8Array], {
          type: "application/msword"
        });
        this.$nextTick(() => {
          let docx = require("docx-preview");
          docx.renderAsync(blob, this.$refs.fileView); // 渲染到页面
        }); 
}
.fileView {
  width: 100%;
  overflow: hidden;
  height: 75vh;
  overflow-y: auto;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在 Uniapp 中,可以使用以下代码将后端返回base64 字符串下载为 Word 文件: ```javascript // 将 base64 字符串转换为 ArrayBuffer const base64ToArrayBuffer = (base64) => { const binary = atob(base64) const length = binary.length const buffer = new ArrayBuffer(length) const view = new Uint8Array(buffer) for (let i = 0; i < length; i++) { view[i] = binary.charCodeAt(i) } return buffer } // 将 ArrayBuffer 转换为文件并保存到本地 const saveBase64AsFile = (base64, filename) => { const arrayBuffer = base64ToArrayBuffer(base64) const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = filename document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } // 下载 Word 文件 const downloadWordFile = () => { uni.request({ url: 'your api url', method: 'GET', responseType: 'arraybuffer', // 指定响应类型为 ArrayBuffer success: (res) => { const base64Str = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')) // 将 ArrayBuffer 转换为 base64 字符串 const filename = 'your filename.docx' saveBase64AsFile(base64Str, filename) }, fail: (err) => { console.log(err) } }) } // 调用示例 downloadWordFile() ``` 其中,`downloadWordFile` 函数使用 `uni.request` 发送 GET 请求获取后端返回Word 文件的二进制数据,指定响应类型为 ArrayBuffer,然后将 ArrayBuffer 转换为 base64 字符串,并调用 `saveBase64AsFile` 函数将其下载为 Word 文件。在调用 `btoa` 函数将 ArrayBuffer 转换为 base64 字符串时,需要先将 ArrayBuffer 转换为 Uint8Array 类型,再使用 `reduce` 方法将其转换为字符串。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值