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

前端预览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);
}
相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf10 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js