纯前端Echart+HTML静态网页下载,无网运行

需求：

项目的一个需求，需要下载一个文件，展示页面的可视化组件。页面很简单，一个查询的功能，显示不同的直方图，饼图等等数据。最好是让用户下载html文件，这样有交互作用。

分析：

下载文件最初考虑后端来做。有后端返回PDF文件，但是效果不是很好，用现在的话说就是，PDF文件显示的是死图。不存在交互了。后端返回HTML文件？那还不如我自己做。
前端做下载HTML，两个问题，1.如何下载2.html如何获取

开始构造

1.点击下载按钮触发事件

 handler() {
    let str: any = downLoadHtml(JSON.stringify(this.allData));
    this.download(this.folderSelected + ".html", str);
  }

点击按钮，1.生成html字符串 2.将字符串写入html文档并下载

2.downloadHtml方法构造

 这个方法来自一个新的文件，导出这个方法。这个就是生成写入html的字符串，这一串字符串当然不是我自己一个一个敲得。这一串字符串怎么来的呢。

3.生成预定义字符串以及方法

const fs = require("fs");
const { resolve } = require('path')
let a = fs.readFileSync(__dirname+"/PageDataDownLoad.html");
let htmlStr = a.toString();
htmlStr = htmlStr.replace(/[\r\n\t]/g, "");

htmlStr = htmlStr.replace(/\"/g, '\\"');
let endstr = `<!-- echarts切入结束点 -->`;
let flag = htmlStr.slice(
  htmlStr.indexOf(`<!-- echarts切入开始点 -->`),
  htmlStr.indexOf(endstr) + endstr.length
);
htmlStr = htmlStr.replace(flag, '"+echartStr+"');

let endDataStr = `//数据切入结束点`;
let flag2 = htmlStr.slice(
  htmlStr.indexOf(`//数据切入开始点`),
  htmlStr.indexOf(endDataStr) + endDataStr.length
);
htmlStr = htmlStr.replace(flag2, 'let allData="+data+";');

let tsCode = `
let echartStr=require('./echart.string.ts')
export function downLoadHtml(data:any) :string{
    return "${htmlStr}";
}
`;
fs.writeFile(__dirname+"/dowonLoad.ts", tsCode, (err) => {
  if (err) {
    return console.log(err);
  }else{
    console.log("文件生成完毕！")
  }
});

使用node.js生成之前的方法文件，这里各种切入，切入包含echart以及我们生成图表的数据。然后使用脚本写入到dowonLoad.ts,也就是上面我们看到的导出方法，那个文件。

4.切入文件以及echart文件

echart字符串模式，其实吧echart.min.js拷贝出来放在浏览器里再复制出来就行了，很简单。

（2022-06-07，我发现vite可以直接引入echart.min.js字符串，比这个更方便 import echartStr from './deal-data/echarts.min.js?raw' 即可，直接是字符串了）

我后面附上echarts字符串文件。

方便开发，我们还需要一个正常的HTML文件。

这里引入原生echart.js使用，不用担心，脚本会帮我们去掉的，我们设置了flag点。

数据调试的时候也可以写死，脚本也会替换掉中间的。

5.回到顶上，下载文档

如何下载好处理，百度就能得到，我这里顺便贴一下代码

  download(filename: string, text: string) {
    var pom = document.createElement("a");
    pom.setAttribute(
      "href",
      "data:text/plain;charset=utf-8," + encodeURIComponent(text)
    );
    pom.setAttribute("download", filename);
    if (document.createEvent) {
      var event = document.createEvent("MouseEvents");
      event.initEvent("click", true, true);
      pom.dispatchEvent(event);
    } else {
      pom.click();
    }
  }

下载文件的代码，创造A链接，下载即可。可自定义下载文件类型，text写入字符串即可。

使用的时候在原生的HTML页面做好测试，写好静态页面后，执行我们的脚本js

node dealData.js

在package.json中配置一下也可以。

生成后的方法就是我们写的HTML代码了，还可以进行一些压缩，目前我的这个文档的大小约2M，肯定还可以更大程度压缩，我暂时没找到方法。

注意：压缩时候因为把回车去掉了，所以语句很多在一行上，所以必须使用prettier 格式化插件，或者其他插件，将每一句语句后面加上封号，以保证程序的正确。如果不加分号，很有可能会出问题。

附件：

echart.string.js