导出文件的方法

最新推荐文章于 2024-06-10 22:18:41 发布

Fan.fan.

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量37

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/fan_romantic/article/details/133531018

版权

通过后端返回的 url 导出文件

/**
 * 通过后端返回的 url 导出文件
 * @param file_url 字符串链接
 * @returns {*} 返回处理后的新对象
 */
export const exportFile = (file_url: string): Promise<void> => {
  return new Promise((resolve) => {
    fetch(file_url)
      .then((res) => res.blob())
      .then((blob) => {
        const a = document.createElement("a");
        const url = window.URL.createObjectURL(blob);
        const name = file_url.split("/");
        const filename = `${name[name.length - 1]}`;
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
        resolve();
      });
  });
};

/**
 * 通过后端返回的 url 导出文件
 * @param file_url 字符串链接
 */
export const exportFileByUrl = (file_url: string) => {
  const a = document.createElement("a");
  const name = file_url.split("/");
  const filename = `${name[name.length - 1]}`;
  a.href = file_url;
  a.download = filename;
  a.click();
  a.remove();
};

通过后端返回的 blob 导出文件


/**
 * 通过后端返回的 blob 导出文件
 * @param blob 字符串链接
 * @param filename 文件名称
 * @returns {*} 返回处理后的新对象
 */
export const downloadFile = (filename: string, blob: Blob) => {
  const a = document.createElement("a");
  const binaryData: Blob[] = [];
  binaryData.push(blob);
  const url = window.URL.createObjectURL(new Blob(binaryData));
  a.href = url;
  a.download = decodeURIComponent(filename);
  a.click();
  window.URL.revokeObjectURL(url);
};