Vue导出方式总结

1、echarts图导出为图片

export function exportImg(refName, imgName, theme) {
  let img = new Image();
  img.src = refName.getDataURL({
    type: "png",
    pixelRatio: 1, //放大2倍
    backgroundColor: theme == 'dark' ? '#000': "#fff",
  });
  img.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let dataURL = canvas.toDataURL("image/png");
 
    let a = document.createElement("a");
    let event = new MouseEvent("click");
    a.download = `${imgName || '图片'}.png`;
    // 将生成的URL设置为a.href属性
    a.href = dataURL;
    // 触发a的单击事件
    a.dispatchEvent(event);
    a.remove();
  };
}

参数说明：

refName：DOM元素

imgName：图片名称

theme：项目主题，主要用于设置图片的背景色

2、表格导出为excel表

• 安装依赖

npm install --save xlsx file-saver

• 定义通用方式 

export function exportExcel(refName, excelName) {
  try {
    const $e = refName.$el
    let $table = $e.querySelector('.el-table__fixed')
    if (!$table) {
      $table = $e
    }
    const wb = XLSX.utils.table_to_book($table, { raw: true })
    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      `${excelName}.xlsx`,
    )
  } catch (e) {
    if (typeof console !== 'undefined') console.error(e)
  }
}

refName：表格DOM元素

excelName：导出后生成的excel名称

3、文件流转化为文件

const blob = new Blob([res]); // 把得到的结果用流对象转一下
var a = document.createElement("a"); //创建一个<a></a>标签
a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
a.download = `名称.xlsx`; //设置文件名
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
a.remove(); // 一次性的，用完就删除a标签

适用于responseType为blob的请求