哈希标记字符使文件在下载时不完整

我有一个文本文件，在用户下载之前我正在对它进行一些更改。所有更改都是使用Javascript/Typescript进行的，不会产生任何错误。我面临的问题是，当用户下载文件时，它总是在一个特定且不相关的单词之后不完整。如果我在实际下载之前console.log，我可以很好地看到文件。问题的根源似乎是添加了对文件的引用，因为如果我删除"添加引用"部分，文件就会按预期下载。遗憾的是，我无法删除这个部分。

此功能适用于用户在浏览器中导航时：

myDownloadFunction(file: Features[]) {
...
// Features is OpenLayer's Features
// https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
// Declare variables and minor changes
let final_output:string = kml_format.writeFeatures(file);
...
// Add references
for (let feature of this.featuresToExport) {
let idToExport = feature.id_;
let featureColor:string = feature.values_.color;
let featureHexColor = this.getColorByName(featureColor);
let colorElement = '<Style id="app_style_'+idToExport+'"><IconStyle><Icon><href>https://earth.google.com/earth/rpc/cc/icon?color='+featureHexColor+'&amp;id=2000&amp;scale=4</href></Icon></IconStyle></Style>';
// Add style element
let indexOfDocument = final_output.indexOf("Document");
let indexOfClosingDocument = final_output.indexOf(">", indexOfDocument) + 1;
let output = [
final_output.slice(0, indexOfClosingDocument), 
colorElement, 
final_output.slice(indexOfClosingDocument)
].join('');
// Add reference to style element
let indexOfPlacemark = output.indexOf('Placemark id="' + idToExport + '"');
let indexOfClosingPlacemark = output.indexOf(">", indexOfPlacemark) + 1;
output = [
output.slice(0, indexOfClosingPlacemark), 
'<styleUrl>#app_style_'+idToExport+'</styleUrl>', 
output.slice(indexOfClosingPlacemark)
].join('');
final_output = output;
}   
this.mainDoc = "data:text/json;charset=utf-8," + final_output;
console.log(this.mainDoc); // <-- Here I can see the whole document perfectly fine  
let link = document.createElement("a");
link.download = this.file_name + this.file_extension;
link.href = this.mainDoc;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
link = null;
}

所有变量都被正确获取，文件以文本中间的一个单词结尾，与任何变量都没有关系。

最初，我用于编辑该文件的方法是jQuery.parseXML((，但也发生了同样的错误，所以我尝试将该方法更改为上面发布的方法。

我想问题可能是一些异步步骤，当下载事件被触发时，这些步骤仍在进行中，但分析传入的代码时，我看不到任何异步部分。

我试图使用FileSaver.js作为下载文件的替代方法，但也发生了同样的错误。

我试图将这一部分封装在Promise中，以确保没有留下任何东西，但这也没有解决问题。

myDownloadFunction(file: Features[]) {
...
// Feature is OpenLayer's Feature
// https://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html
// Declare variables and minor changes
let final_output:string = kml_format.writeFeatures(file);
...
// Add references
this.addReference(final_output).then(fo2 => {
this.mainDoc = "data:text/json;charset=utf-8," + fo2;
let link = document.createElement("a");
link.download = this.file_name + this.file_extension;
link.href = fo2;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
link = null;
});
}
addReference(final_output): Promise<string> {
return new Promise((resolve, reject) => {
this.featuresToExport.forEach((feature, index, arr) => {
let idToExport = feature.id_;
let featureColor:string = feature.values_.color;
let featureHexColor = this.getColorByName(featureColor);            
console.table({"idToExport": idToExport, "featureColor": featureColor, "featureHexColor": featureHexColor});
let colorElement = '<Style id="sfmapp_style_'+idToExport+'"><IconStyle><Icon><href>https://earth.google.com/earth/rpc/cc/icon?color='+featureHexColor+'&amp;id=2000&amp;scale=4</href></Icon><hotSpot x="64" y="128" xunits="pixels" yunits="insetPixels"/></IconStyle></Style>';
// Add style element
let indexOfDocument = final_output.indexOf("Document");
let indexOfClosingDocument = final_output.indexOf(">", indexOfDocument) + 1;
let output = [
final_output.slice(0, indexOfClosingDocument), 
colorElement, 
final_output.slice(indexOfClosingDocument)
].join('');
// Add reference to style element
let indexOfPlacemark = output.indexOf('Placemark id="' + idToExport + '"');
let indexOfClosingPlacemark = output.indexOf(">", indexOfPlacemark) + 1;
output = [
output.slice(0, indexOfClosingPlacemark), 
'<styleUrl>#sfmapp_style_'+idToExport+'</styleUrl>', 
output.slice(indexOfClosingPlacemark)
].join('');
final_output = output;
if (index === arr.length - 1){ 
resolve(final_output); 
}
});
});
}

在这里，您可以看到一个假设文件是如何的示例，以及如何下载。

我已经尝试了其他一些事情，我想我已经缩小了问题的根源。当我从引用文本中删除标签字符(#(时，一切都如预期的那样工作。如果我离开标签，它就会坏掉。有人知道为什么会发生这种事吗？我试着像往常一样逃跑，但没有成功。

let referenceElement = '<styleUrl>#app_style_'+idToExport+'</styleUrl>'; // It will break
let referenceElement = '<styleUrl>app_style_'+idToExport+'</styleUrl>'; // Working fine

通过使用标签字符的ASCII编码参考来解决问题：

let referenceElement = '<styleUrl>%23app_style_'+idToExport+'</styleUrl>';

encodeURIComponent('#string'(帮助我解决了这个问题。

https://www.w3schools.com/tags/ref_urlencode.ASP

相关内容

最新更新

热门标签：