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

前端预览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);
}
相关推荐
lvchaoq23 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开28 分钟前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱2 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO2 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
开水好喝3 小时前
Code Coverage Part I
前端
DoraBigHead3 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试