关于前端预览一些文件的处理方法

前端预览XLSX

首先因为XLSX需要ArrayBuffer格式的数据,所以我们需要把我们获取到的数据先转换成ArrayBuffer.我所熟悉的数据格式是blob,所以我选择先转换成blob,在通过blob上的原生方法转换成ArrayBuffer.

js 复制代码
downloadNameFile(record.storeFileName).then((res) => {
	// 这里的res返回的是blob类型的数据,通过arrayBuffer()可以转换成arrayBuffer类型的数据
   res.arrayBuffer().then(buffer => {
        const wb = xlsx.read(buffer);
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        let html = xlsx.utils.sheet_to_html(ws);
        parentDom.innerHTML = html;
    })
})

前端预览PDF

前端预览PDF我借鉴的是最简单的通过window.open()这个方法打开一个新标签页,预览PDF.你如果有更复杂的需求,可以去这个网站看一下PDF.js Express

js 复制代码
const blob = new Blob(blobData, { type: application/pdf' });
const blobURL =window.URL.createObjectURL(blob);
window.open(blobURL);
window.URL.revokeObjectURL(blobURL);

这里记住一定要设置blob的类型为application/pdf,这样才能正确在新标签页中预览.

前端下载文件

js 复制代码
/**
 * 下载文件流
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
 export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });

  const blobURL = window.URL.createObjectURL(blob);
  const tempLink = document.createElement('a');
  tempLink.style.display = 'none';
  tempLink.href = blobURL;
  tempLink.setAttribute('download', filename);
  if (typeof tempLink.download === 'undefined') {
    tempLink.setAttribute('target', '_blank');
  }
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  window.URL.revokeObjectURL(blobURL);
}
相关推荐
前端小巷子26 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出3 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试