前端下载/保存/压缩

前端下载文件、保存、上传、压缩等操作记录，都是自己用过的

我在海底吃菠萝

1255人浏览 · 2022-11-21 14:48:54

我在海底吃菠萝 · 2022-11-21 14:48:54 发布

保存文件流文件（excel，word，pdf等）

1.第一种方法

 //下载模板接口 
static DownloadTemplate(
    events
) {
    axios({
        url: `/common/get_excel_demo`,
        responseType: "blob",   //后端返回的是文件，需要设置响应类型为blob格式
        method: "get"
    })
        .then(res => {
            events(res.data)
        })
}

//获取文件保存，直接保存文件，但不能设置保存文件名字
Request.DownloadTemplate(res => {
    //可有可无，根据情况来定，如果已经拿到blob格式文件直接导出即可
    let blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8" }); 
    let objectUrl = URL.createObjectURL(blob);
    window.location.href = objectUrl;
})

2.第二种方法

//可以设置保存名称
Request.DownloadTemplate(res => {
   //可有可无，根据情况来定，如果已经拿到blob格式文件直接导出即可
    let blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8" });
    let objectUrl = URL.createObjectURL(blob);
    const a = document.createElement('a')
    document.body.appendChild(a) // 此处增加了将创建的添加到body当中
    a.href = objectUrl
    a.download = '文件名称名称.xlsx'
    a.click()
    a.remove() // 将a标签移除
})

3.第三种方法

import { saveAs } from "file-saver"    //需要借助file-saver  js库

Request.DownloadTemplate(res => {
   //可有可无，根据情况来定，如果已经拿到blob格式文件直接导出即可
  let blob = new Blob([res], { type: 'application/msword;charset=utf-8' });
  saveAs(blob, '哈哈哈.doc')   //可以选择导出doc还是docx，xls还是xlsx，支持各种格式zip等等
})

4.第四种方法

//保存kml文件,和第二种方法类似，获取url的方式不一样
let blob = new Blob([res.data], { type: "application/vnd.google-earth.kml+xml" })
let reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function (e) {
    let a = document.createElement('a')
    a.download = str + `-${resultObj[value.result]}.kml`
    a.href = e.target.result
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    message.success('导出成功')
}

上传文件（excel,word,pdf,img等文件）

img可以通过image标签、antd的image组件中获取file文件来上传

//数据导入接口
static upLoadFile(
    param, events
) {
    axios({
        url: `/common/upload?areaCode=${param.areaCode}`,
        method: "post",
        data: param.file
    })
        .then(res => {
            events(res.data)
        })
}

const file = new FormData();  //将获取到的文件变为二进制，然后上传
file.append('type', 2)   //上传类型
file.append("file", value.file.file);

压缩图片

ImageCompressor方法压缩

import ImageCompressor from "image-compressor.js";  // 安装引入

//压缩图片 压缩格式为file或者是blob
new ImageCompressor(file,
    {
        quality: .6, // 压缩的比率 0.6刚好,
        success: (res) => {  
            console.log(res);  //res是一个blob的文件 
            let files = new File([res], res.name, { type: res.type })   
          	//通过File转换为file文件,得到文件流
        },
        error: (err) => {
            console.log(err);
        },
        beforeDraw: (result) => {
            console.log(result);
        }
    }
)

ImageCompressor options参数

参数	类型	定义
checkOrientation	boolean	是否检查图片的 orientation 属性，默认值是 true。提示：如果读取图像的EXIF的 orientation 属性（JPEG图像），有可能根据 orientation 属性自动翻转或旋转图像。注意：不要一直相信这一点，因为一些JPEG图像有不正确的（不是标准的） orientation 属性
maxWidth	number	输出图像的最大宽度，默认值是 Infinity。值应该大于0。
maxHeight	number	输出图像的最大高度，默认值是 Infinity。值应该大于0。
minWidth	number	输出图像的最小宽度，默认值是 0。该值应大于0且不应大于maxWidth
minHeight	number	输出图像的最小宽度，默认值是 0。该值应大于0且不应大于maxHeight
width	number	输出图像的宽度，默认值是 undefined。值应该大于0
height	number	输出图像的高度，默认值是 undefined。值应该大于0。
quality	number	输出图像的画质，默认值是 undefined。值是0到1之间的数字。
mimeType	string	输出图像的文件类型，默认值是 auto。默认情况下，源映像文件的原始MIME类型将被使用。
convertSize	number	输出图像的文件类型，默认值是 5000000 (5MB)。注意：PNG文件超过此值将被转换为JPEG格式。若要禁用此功能，只需将值设置为无穷大。
beforeDraw	Function	在将图像绘制到画布中进行压缩之前执行的函数，默认值是 null。
drew	Function	该函数执行后，将图像绘制到画布中进行压缩，默认值是 null。
success	Function	成功压缩图像时执行的回调函数，默认值是 null。
error	Function	当图像压缩失败时执行的回调函数，默认值是 null。

beforeDraw(context, canvas)

context: canvas的2D渲染上下文。
canvas: 压缩画布

new ImageCompressor(file, {
  beforeDraw(context) {
    context.fillStyle = '#fff';
  },
});

drew(context, canvas)

context: canvas的2D渲染上下文。
canvas: 压缩画布

new ImageCompressor(file, {
  drew(context) {
    context.filter = grayscale(100%);
  },
});

canvas方法压缩

// 压缩图片
export const CompressImage = (file) => {
    let files;
    const fileSize = parseFloat((parseInt(file['size']) / 1024 / 1024).toFixed(2))
    const read = new FileReader();
    read.readAsDataURL(file);
    return new Promise(function (resolve, reject) {
        read.onload = function (e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function () {
                var w = this.width,
                    h = this.height
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var base64;
                canvas.setAttribute("width", w)
                canvas.setAttribute("height", h)
                ctx.drawImage(this, 0, 0, w, h)
                if (fileSize < 1) {
                    base64 = canvas.toDataURL(file['type'], 1)
                } else if (fileSize > 1 && fileSize < 2) {
                    base64 = canvas.toDataURL(file['type'], 0.5)
                } else {
                    base64 = canvas.toDataURL(file['type'], 0.2)
                }
                files = dataURLtoFile(base64, file['name']); //如果后台接收类型为base64的话这一步可以省
                resolve(files)
            }
        }
    })
}