之前我已在我的项目中实现了文件管理器,但自从我将其更改为ES6模块后,saveAs将无法运行。从某些调查中,FileSaver函数中的view
返回undefined
,这会导致函数返回而不保存我的文件。以下是我的称呼方式。 Rasterize和Serialize是从svg which is refactored from here创建blob的函数。
view
中的更改是否会归因于汇总过程?
var rasta = await rasterize(chart);
saveAs(rasta, `chart.png`);
}
function rasterize(svg) { // FROM BOSTOCK via Observable modified for use outside of Observable environment
let resolve, reject;
const promise = new Promise((y, n) => (resolve = y, reject = n));
const image = new Image;
image.onerror = reject;
image.onload = () => {
const rect = svg.getBoundingClientRect();
const context = d3.create("canvas").attr("height", rect.height).attr("width", rect.width).node().getContext("2d");
context.fillStyle = "white";
context.fillRect(0,0,rect.width,rect.height);
context.drawImage(image, 0, 0, rect.width, rect.height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
function serialize(svg) { // FROM BOSTOCK via Observable modified for use outside of Observable environment
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";
svg = svg.cloneNode(true);
svg.setAttributeNS(xmlns, "xmlns", svgns);
svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(svg);
return new Blob([string], {type: "image/svg+xml"});
}
更新
似乎如果我将原始FileSaver文件内容粘贴到生成的汇总中,它可以正常工作,那么汇总过程的工作方式就一定存在问题。