🔥前端开发，文件流保存成文件并下载

前言

今天写一篇文章，题目为"文件流保存成图片"
前期准备: vue3、ant-design-vue4

代码部分:

次要代码

template:

script:

主要代码

第一种办法 canvas

利用canvas把图片的url搞出来，然后通过一个a标签点击下载

const handleChange = async (info) => {
  // 假设fileStream是一个文件流对象

  // 创建一个Image对象
  const image = new Image();

  // 当Image对象加载完成后执行回调函数
  image.onload = function () {
    // 创建一个Canvas元素
    const canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;

    // 将文件流绘制到Canvas上
    const context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);

    // 将Canvas转换为DataURL
    const dataURL = canvas.toDataURL("image/png");

    // 创建一个下载链接
    const a = document.createElement("a");
    a.href = dataURL;
    a.download = "image.png";
    document.body.appendChild(a);

    // 触发下载链接
    a.click();

    // 清理下载链接
    document.body.removeChild(a);
  };

  // 将文件流设置为Image对象的src属性
  // 文件流: info.file.originFileObj
  image.src = URL.createObjectURL(info.file.originFileObj);
};

第二种办法 文件流转base64

这篇文章讲解了各种格式互相转换的方法，可以酌情按需看看。

图片的文件流转成图片的base64 URL，然后也是通过a标签点击下载

/**
 * file转base64
 * @param file       {File}    文件
 * @returns promise  {Promise} 返回base64
 */
 
const fileToBase64 = (file) => {
    return new Promise((resolve, reject) => {
        
        // 使用FileReader对象异步读取文件的内容
        const reader = new FileReader()
        let readerResult = ''
        
        // 开始读取
        reader.readAsDataURL(file)
        
        // 操作完成时触发
        reader.onload = function () {
            readerResult = reader.result
        }
        
        // 读取操作发生错误时触发
        reader.onerror = function (error) {
            reject(error)
        }
        
        // 读取操作结束时触发（要么成功、要么失败）
        reader.onloadend = function () {
            resolve(readerResult)
        }
    })
}

// 文件流通过a标签点击下载图片

const handleChange = async (info) => {
  const base64Url = await fileToBase64(info.file.originFileObj);
  console.log(base64Url);

  // 创建一个下载链接
  const a = document.createElement("a");
  a.href = base64Url;
  a.download = "image.png";
  document.body.appendChild(a);

  // 触发下载链接
  a.click();

  // 清理下载链接
  document.body.removeChild(a);
};

效果

如下图：

总结

以上就是将文件流转化成图片，然后进行模拟点击下载链接来保存一些文件（图片、word、pdf等等）。

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读！