前端导出图片和各种文件

html导出图片

	import * as htmlToImage from 'html-to-image';

      htmlToImage.toBlob(document.getElementById('lineChart') as any).then((blob: any) => {
        window.saveAs(blob, '基因组覆盖度.png');
      });
1
2
3
4
5

下载文件，导出csv文件，导出txt文件

import Papa from 'papaparse';

/**
 * 下载文件
 * @param content 文件内容
 * @param fileName 文件名称
 */
export const download = (content: string, fileName: string) => {
  const link = document.createElement('a');
  link.href = encodeURI(content);
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

/**
 * 下载csv文件
 * @param origin 列表数据对象
 * @param fileName 文件名
 */
export const downloadCSV = (origin: any, fileName: string) => {
  const result = Papa.unparse(origin);
  const csv = `data:text/csv;charset=utf-8,${result}`;
  download(csv, fileName);
};

/**
 * 下载txt文件
 * @param origin 列表数据对象
 * @param fileName 文件名
 */
 export const downloadTxt = (result: any, fileName: string) => {
  const csv = `data:text/csv;charset=utf-8,${result}`;
  download(csv, fileName);
};


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

electron导出pdf文件

注意： 这个方法导出的是当前浏览器窗口的区域，想要导出页面中局部的内容，参考我的其他博客。插件html2canvas和jspdf

const { ipcRenderer } = require('electron');

    const getPdf = () => {

      ipcRenderer.send('print', '新冠溯源.pdf');
      ipcRenderer.once('wrote-pdf', function (event: any, path: any) {
      console.log('导出成功！')
      });
    };
1
2
3
4
5
6
7
8
9