PC端常用的文件导出的方法（ts版）

记录下以往搜集到的几个常用的操作文件的方法，包含表格、文件、图片的导出

npm install xlsx --save --registry=https://registry.npmmirror.com --legacy-peer-deps

import * as XLSX from 'xlsx'
/**
 * 导出
 * @param blob 导出
 * @param fileName 下载文件名
 */
const download = (blob: Blob, fileName: string = 'fileName') => {
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}
/**
 * 导出文件
 * @param buffer
 * @param fileName 下载文件名
 */
export const downloadFile = (buffer: any, fileName?: string) => {
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  download(blob, fileName)
}
/**
 * 导出选择的数据
 * @param selectedData 选择的数据
 * @param fileName 下载文件名
 */
export const exportSelectedData = (selectedData: any, fileName?: string) => {
  const worksheet = XLSX.utils.json_to_sheet(selectedData)
  const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }
  // 客户端浏览器环境下直接生成Excel文件并提示保存
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  downloadFile(excelBuffer, fileName)
}
/**
 * 根据表格id导出excel
 * @param el 表格id
 * @param fileName 下载文件名
 */
export const exportExcelByEl = (el: string, fileName?: string) => {
  // 转换成excel时，使用原始的格式
  const xlsxParam = { raw: true }
  const fix = document.querySelector('.el-table__fixed')
  let workbook
  if (fix) {
    workbook = XLSX.utils.table_to_book(document.querySelector(el)?.appendChild(fix), xlsxParam)
    document.querySelector(el)?.appendChild(fix)
  } else {
    workbook = XLSX.utils.table_to_book(document.querySelector(el), { raw: true })
  }
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array' })
  downloadFile(excelBuffer, fileName)
}
/**
 * 导出图片
 * @param url 远程图片地址
 * @param fileName 下载文件名
 */
export const downloadImgByUrl = (url: string, fileName?: string) => {
  const canvas = document.createElement('canvas')
  const img = document.createElement('img')
  // 解决跨域 Canvas 污染问题
  img.setAttribute('crossOrigin', 'Anonymous')
  //将资源链接赋值过去，才能触发img.onload事件
  img.src = url
  img.onload = function (e) {
    canvas.width = img.width
    canvas.height = img.height
    const context = canvas.getContext('2d', { alpha: false })
    if (!context) throw '无法创建canvas画布，下载失败'
    //绘制图片
    context.drawImage(img, 0, 0, img.width, img.height)
    canvas.toBlob((blob) => {
      if (blob) download(blob, fileName)
    })
  }
}
/**
 * 二进制流转base64
 * @param data 二进制流
 * @returns base64
 */
export function binaryToBase64V1 (data:any) {
  const binaryData = new Blob([data])
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => {
      // readAsDataURL 按照字符串处理，此处忽略ts检查
      // @ts-ignore
      const base64String = reader.result?.split(',')[1]
      resolve(base64String)
    };
    reader.onerror = reject
    // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
    reader.readAsDataURL(binaryData)
  })
}
/**
 * 二进制流转base64
 * @param data 二进制流
 * @returns base64
 */
export function binaryToBase64V2 (data:any) {
  const binaryData = new Blob([data])
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => {
      // readAsArrayBuffer 按照 ArrayBuffer 处理，此处忽略ts检查
      // @ts-ignore
      const base64String = base64Encode(reader.result)
      resolve(base64String)
    };
    reader.onerror = reject
    // 开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
    reader.readAsArrayBuffer(binaryData)
  })
}
/**
 * 使用TextEncoder将ArrayBuffer转换为字符串，再使用btoa函数将字符串转换为Base64
 * @param arrayBuffer
 * @returns string
 */
function base64Encode (arrayBuffer:ArrayBuffer): string {
  const uint8Array = new Uint8Array(arrayBuffer)
  let binaryString = '';
  for (let i = 0; i < uint8Array.length; i++) {
    binaryString += String.fromCharCode(uint8Array[i]);
  }
  return btoa(binaryString);
}

其中 exportExcelByEl 根据 DOM导出的，依赖于 element-plus 

js版本可自行改造下。