我正在使用数据属性来模拟从客户端 JavaScript 下载文件。这是我的源代码：
var data = "data:application/text,anything is here";
window.location.href = data;
这完美地工作并模拟文件下载。有没有什么方法可以指定文件名，作为数据 URI 的一部分或使用浏览器提供的其他工具？
我知道标签download的属性<a>，但我想知道除了默认值之外是否还有其他选项，即使用data其自身的值作为建议的文件名。
场景：用户选择几个选项，下载 PDF。然后，用户更改一些选择，并下载新的 PDF。
问题：第一次运行时一切正常，但尝试下载第二个 PDF 会为用户提供相同的旧 PDF。
我的想法/猜测：运行 jsPDF 操作（制作文档、添加内容、保存文档）的函数在单击时调用。我的假设是所有操作都会在单击时重新运行，但情况似乎并非如此。
有什么方法可以“清除”或“杀死”旧的 PDF 吗？我尝试在再次运行该函数之前将 var doc 设置为 null，但这没有帮助。不知何故，我只能提供生成的第一个 PDF。
这是制作 PDF 的代码。这些 frontImg 和 backImg 变量包含 dataURI。
$(".button").click(function(){
var doc = new jsPDF('landscape');
doc.addImage(frontImg, 'PNG', 0, 0, 300, 210);
doc.addPage('a6','l');
doc.addImage(backImg, 'PNG', 0, 0, 300, 210);
doc.save('file.pdf');
});
这里有人有什么想法吗？一旦用户采取更新 frontImg 和 backImg 变量的操作，PDF 是否也应该更新？
假设我使用数据 URI（例如<img src="data:image/png;base64,...." />.
有没有什么方法可以多次显示该图像，并且后续图像引用第一个图像，而不必重复数据 URI？例如（虽然很糟糕）：
<html><head>...</head>
<body>
<p>Here's my car:</p>
<img id="img1" src="data:image/png;base64,..." />
<p>Some details about my car</p>
<p>Did I mention I just bought a car?</p>
<p>And here it is again:</p>
<img something_to_show_another_image_again="#img1" />
...
</body>
</html>
我想从 ImageData 对象（即宽度、高度、数据）创建 dataURL。我意识到画布有这个，但我想避免扭曲画布使用（主要是alpha预乘）..即我想避免明显的canvas.putImageData步骤。
从这篇文章中，我可以将任何 arraybuffer/typedarray/dataview 转换为 base64。我不知道画布 dataurl 如何将宽度/高度添加到 base64 字符串的 Uint8 数据部分。我也不知道 png 转换是如何完成的。（我可以接受原始数据图像类型，但我认为没有一个..只有 png 和 jpg）
可能的方法：
有人知道如何从原始宽度、高度、数据 Imagedata 构造图像 dataURL 吗？
我可能会问显而易见的问题，但是是否可以使用数据 URI 将图像嵌入到 RSS 或原子提要中？
（如果我将它们嵌入 hwo 以使提要阅读器理解？）
例子
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<image>
<url><![CDATA[data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==]]></url>
<title>Spain.info</title>
<width>48</width>
<height>48</height>
<link>https://en.wikipedia.org/wiki/Data_URI_scheme</link>
</image>
<title>Data URI scheme</title>
<atom:link href="https://en.wikipedia.org/wiki/Data_URI_scheme" rel="self" type="application/rss+xml" />
<link>https://en.wikipedia.org/wiki/Data_URI_scheme</link>
<description>Data URI scheme</description>
<lastBuildDate>Tue, 12 Jul 2016 19:49:39 +0000</lastBuildDate>
</channel>
</rss>
我正在开发一个使用http://tabulator.info/来呈现数据表的 phonegap 应用程序。制表符的功能之一是它允许将表格内容导出为 excel 文件 (xlsx) 以供下载。该功能在独立网页/应用程序上运行良好，并分别在 Android/iPhone 上的 chrome/safari 浏览器上下载 xls 文件。
问题：当同一个 web 应用程序与 phonegap cordova 应用程序打包时，下载功能不起作用。似乎 Phonegap/Cordova 不允许打开数据：PDF 和 XLSX 的 url。应用程序 config.xml 已更新为所需的白名单插件和允许数据所需的条目：urls。
此外，html 文件顶部包含以下内容安全策略：
<meta http-equiv="Content-Security-Policy" content="
default-src * data:;
style-src * 'unsafe-inline';
script-src * 'unsafe-inline';
media-src * data:; img-src * data:;
" />
我尝试创建一个小的虚拟应用程序，试图打开一个示例数据：通过锚标记链接，但它根本不执行任何操作。调试器/控制台中也没有记录异常。
有没有人遇到过这种情况？有人想出解决方案了吗？
任何帮助是极大的赞赏。
谢谢你。
我正在尝试为apple-touch-icon我的head标签中的每个尺寸提供图像。我这样做：
// not shown: import all image files: logo57, logo76, etc
<link rel="apple-touch-icon" sizes="57x57" href={logo57} />
<link rel="apple-touch-icon" sizes="76x76" href={logo76} />
<link rel="apple-touch-icon" sizes="120x120" href={logo120} />
<link rel="apple-touch-icon" sizes="152x152" href={logo152} />
<link rel="apple-touch-icon" sizes="167x167" href={logo167} />
<link rel="apple-touch-icon" sizes="180x180" href={logo180} />
问题在于，当页面呈现时，所有这些图像都直接包含在页面中作为数据 URI 中的 base 64，而不是相对 url。像这样：
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAA....">
这是有问题的，原因有几个。一方面，这些图像仅在渐进式 Web 应用程序场景中需要；普通桌面浏览器不需要它们，但桌面浏览器被迫下载所有这些 base 64 块，从而减慢了页面加载速度。其次，即使在 PWA 场景中，每个设备也只需要这些图像中的一个，而不是全部，因此页面加载时间也会减慢。
这是对小于 10,000 字节的图像的记录优化，因此它们都在这里加载可能是微不足道的差异。但是，原始 png 的总大小总计约 27kb（转换为 base 64 后我不知道），如果不需要，我似乎宁愿不将这些数据包含在每个页面中。
我发现我可以将所有图像移动到 /static 文件夹并使用 引用它们href="logo57.png"，但是随后我失去了编译时验证，这些图像实际上存在于给定的 href 中，以及包含图像哈希在文件名中（出于缓存原因）。 …
apple-touch-icon data-uri webpack progressive-web-apps gatsby
正如您所知并在 w3 中所述，可以使用 Blob 的 createObjectUrl 在 javascript 中为 Blob 对象创建 url。另一方面，如果我们有一个 Base64 编码字符串的数据，我们可以将其呈现为格式为“data[MIMEType];base64,[data>]”的 Url。
假设我有一个 Base64 编码的字符串，它是从当今非常流行的图像生成的：）维基百科中的“红点”图像。
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
我 100% 确定，如果我创建一个符合上述数据 URI 方案的 URL，那么我将能够放置一个链接元素并从浏览器下载它：请参阅下面的代码示例：
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = "data:image/png;base64," + reddotB64;
document.body.appendChild(reddotLink);
reddotLink.click();
document.body.removeChild(reddotLink);
这工作得很好，并在新选项卡中显示图像。另一方面，我将尝试使用 Blob 创建链接，如下所示：
var reddotB64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg";
var reddotBlob = new Blob([atob(reddotB64)], { type: 'image/png' });
var reddotLink = document.createElement("a");
reddotLink.target = "_blank";
reddotLink.href = URL.createObjectURL(reddotBlob);
document.body.appendChild(reddotLink); …我有一个小型网络应用程序，当它离线工作时，将其发布在二维码上会很酷。然而，数据 URL 似乎不适用于 QR 码。有谁知道这个问题的解决方法？我想要一个 QR 码，可以在没有网络连接的情况下将 HTML 传送到用户的浏览器。
我想使用javascript实现客户端可下载文件,并使用DATA URI使用以下方式在客户端动态创建文件:
<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Download CSV</a>
但是,下载的文件没有名称.我在stackoverflow上看到了一些解决方案,其中可以使用'download'属性,但我需要支持旧的浏览器,所以我不能使用它.