如何将散景 html 文件中的多个图形保存为单独的 png 图形，但只下载一个 zip 文件？

Question

这个问题是基于How to save the multiple figures in a bokeh gridplot into separate png files?，其中接受的答案已经提供了将散景网格图中的多个图形保存到单独的PNG文件中的工作代码。

但是，有了这个答案，就会下载许多 png 图形，每个 png 图形都是一个单独的文件。我的用户将所有 png 图形作为一个 zip 文件下载更方便。
你能帮我做吗？

Answer 1

使用链接帖子中接受的答案作为起点，您可以修改 javascript 以下载 zip 而不是单个 png。这是一种方法：

let script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
script.onload = function () {
  let shadow_root1 = document.querySelector(".bk-GridPlot");
  let shadow_root2 = shadow_root1.shadowRoot.querySelector(".bk-GridBox");
  let shadow_root3 = shadow_root2.shadowRoot.querySelectorAll(".bk-Figure");

  let urls = [];

  shadow_root3.forEach(figure => {
    let shadow_root4 = figure.shadowRoot.querySelector(".bk-Canvas");
    let canvas = shadow_root4.shadowRoot.querySelector("canvas");
    let url = canvas.toDataURL("image/png");
    urls.push(url);
  });

  let zip = new JSZip();

  let count = 0;
  urls.forEach(url => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        let filename = `CanvasAsImage${++count}.png`;
        zip.file(filename, xhr.response, { binary: true });
        if (count === urls.length) {
          zip.generateAsync({ type: 'blob' }).then(function(content) {
            let downloadLink = document.createElement('a');
            downloadLink.download = 'CanvasAsImage.zip';
            downloadLink.href = URL.createObjectURL(content);
            downloadLink.click();
          });
        }
      }
    };
    xhr.send();
  });
};
document.head.appendChild(script);

---

编辑：

要根据标题命名 png，需要进行一些小的修改。首先，将

p1

和

p2

都传入回调：

button = Button(label="Save all figures")
callback = CustomJS(
    args=dict(p1=p1, p2=p2),
    code="""

然后，改变

filename

变量：

let filename = [p1.title.text, p2.title.text][count++] + '.png';