我有一个页面,允许用户下载动态生成的文件.生成需要很长时间,所以我想显示一个"等待"指标.问题是,我无法弄清楚如何检测浏览器何时收到文件,所以我可以隐藏指标.
我正在以隐藏的形式发出请求,该请求POST到服务器,并针对其结果定位隐藏的iframe.这样我就不会用结果替换整个浏览器窗口.我在iframe上监听"加载"事件,希望在下载完成后它会触发.
我在文件中返回"Content-Disposition:attachment"标题,这会导致浏览器显示"保存"对话框.但浏览器不会在iframe中触发"加载"事件.
我尝试过的一种方法是使用多部分响应.因此它会发送一个空的HTML文件,以及附加的可下载文件.例如:
Content-type: multipart/x-mixed-replace;boundary="abcde"
--abcde
Content-type: text/html
--abcde
Content-type: application/vnd.fdf
Content-Disposition: attachment; filename=foo.fdf
file-content
--abcde
这适用于Firefox; 它接收空的HTML文件,触发"load"事件,然后显示可下载文件的"Save"对话框.但它在IE和Safari上失败了; IE触发"加载"事件但不下载文件,Safari下载文件(名称和内容类型错误),并且不会触发"加载"事件.
一种不同的方法可能是调用启动文件创建,然后轮询服务器直到它准备就绪,然后下载已经创建的文件.但我宁愿避免在服务器上创建临时文件.
有没有人有更好的主意？
我在字符串中有base64编码的二进制数据.
const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
我想创建一个blob:包含此数据的URL并将其显示给用户.
const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);
window.location = blobUrl;
我还没有弄清楚如何创建Blob.
在某些情况下,我可以通过使用data:URL 来避免这种情况.
const dataUrl = `data:${contentType};base64,${b64Data}`;
window.location = dataUrl;
但是在大多数情况下,data:URL非常大.
如何Blob在JavaScript中将base64字符串解码为对象？
我最近一直在摆弄WebGL,并且让Collada读者工作了.问题是它很慢(Collada是一种非常冗长的格式),所以我将开始将文件转换为更易于使用的格式(可能是JSON).事实是,我已经有了用Javascript解析文件的代码,所以我也可以将它用作我的导出器!问题在于节省.
现在,我知道我可以解析文件,将结果发送到服务器,并让浏览器从服务器请求文件作为下载.但实际上服务器与这个特定的进程没有任何关系,为什么要让它参与其中呢？我已经在内存中拥有所需文件的内容.有什么方法可以使用纯javascript向用户提供下载吗？(我怀疑它,但不妨问......)
并且要明确:我没有在用户不知情的情况下尝试访问文件系统!用户将提供一个文件(可能通过拖放),脚本将转换内存中的文件,并提示用户下载结果.就浏览器而言,所有这些都应该是"安全"的活动.
[编辑]:我没有提及它,所以回答"Flash"的海报是有效的,但我正在做的部分是尝试强调纯HTML5可以做什么...所以Flash是在我的情况下.(虽然对于任何正在使用"真实"网络应用程序的人来说,这是一个非常有效的答案.)在这种情况下,除非我想要涉及服务器,否则看起来我运气不好.不管怎么说,还是要谢谢你!
我想使用JavaScript将数据写入现有文件.我不想在控制台上打印它.我想实际写入数据abc.txt.我阅读了许多已回答的问题但是他们在控制台上打印的每一个问 在某些地方,他们已经给了代码,但它不起作用.所以请任何人帮助我如何实际将数据写入文件.
我引用了代码,但它不起作用:给出错误:
Uncaught TypeError: Illegal constructor
在铬和
SecurityError: The operation is insecure.
在Mozilla上
var f = "sometextfile.txt";
writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")
function writeTextFile(afilename, output)
{
var txtFile =new File(afilename);
txtFile.writeln(output);
txtFile.close();
}
那么我们是否可以仅使用Javascript或NOT将数据写入文件？请帮助我提前谢谢
我得到了一个webSocket通信,我收到base64编码的字符串,将其转换为uint8并继续工作,但现在我需要发送回来,我得到了uint8数组,需要将其转换为base64字符串,所以我可以发送它.我该怎么做这个转换？
当用户按下ctrl + s按键但Chrome崩溃时,我正在尝试将我的HTML文件保存在Chrome中.
(我只想下载我的HTML文件的源代码)
我读到它发生是因为我的文件大于1.99M ..
在第一次尝试中(在我知道Chrome崩溃之前):
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.click();
}
download('test.html', "<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>");
在我读到关于崩溃的第二次尝试之后,我使用了blob:
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
function download(dataURI) …我正在尝试以单个 .html 文件的形式创建一个自解压存档（而不是更传统的 .exe 文件）。换句话说，一个 .html 文件中嵌入了另一个文件（任何类型）。
这是一个非常简单的 .html 文件示例，它正是执行此操作。它有一个链接，单击该链接即可从源中硬编码的 Base 64 编码字符串生成并下载 .png 文件。这可以很容易地扩展以处理任何类型的文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Self-Extracting Archive</title>
</head>
<body>
<a href="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
download>Save File</a>
</body>
</html>
问题是 base 64 效率不高。是否可以将文件编码为纯二进制文件？我知道如果有可能的话，它可能会很hacky。没关系，只要它能够兼容所有主流浏览器即可。
我认为类似的东西File.getAsBinary()可能会起作用。如果它可用（但实际上不可用），您可以将二进制文件附加到 .html 文件的末尾，然后以某种方式说服浏览器不要解析文件的该部分。
我目前正在使用当前技术堆栈的应用程序：
后端：
猫鼬
表示
阿波罗
GraphQL
前端：
Vuejs
阿波罗
GraphQL
我已成功使用GraphQL将文件上传到服务器，但我坚持的是如何实现“下载”功能。使用正常的RESTApi端点，我可以使用res.download（filePath），并且可以正常工作。由于不想使用REST，因此如何使用GraphQL做到这一点。
还是在这种情况下还有其他标准要遵循？
谢谢！
对于我正在处理的应用程序,我们有一个功能,我们在服务器端为对象生成报告,并在客户端的新选项卡(暂时)中打开它.
我正在使用该URL.createObjectURL函数为a创建一个URL Blob,该URL 由AJAX调用的结果组成.$window.open(generatedFileUrl)但是,无论何时进行调用,我都会收到JavaScript错误.
控制器:
(function() {
angular.module('app').controller('someCtrl', [
'$window', 'someSvc', controller
]);
function controller($window, someSvc) {
var vm = this;
vm.thing = {}; // How we get the object is unimportant for this question.
vm.printThing = printThing;
function printThing() {
someSvc.printThing(vm.thing.id, vm.someFlag)
.then(function(result) {
var file = new Blob([result], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$window.open(fileURL);
});
}
}
)();
服务:
(function () {
angular.module('app').factory('someSvc', [
'$http', someSvc
]);
function someSvc($http) {
var service …当我在 PostMan 上调用此功能时，它确实下载了 pdf，但是当我从页面调用时，它不会下载但请求到达。我要下载
,generateFarmerPDF:function (id) {
this.farmerId = id
var data = new FormData()
data.append('function','generateFarmerPDF')
data.append('farmerId',this.farmerId )
axios.post(this.url,data)
.then( function (response ) {
}.bind(this)).catch(function (error) {
})
}
这是api代码
if ($function == "generateFarmerPDF") {
$farmerId = $_POST['farmerId'];
$result = DB::instance()->executeSQL("SELECT * FROM `milk_production` WHERE `farmerId` ='$farmerId'");
$header = DB::instance()->executeSQL("SELECT `COLUMN_NAME`
FROM `INFORMATION_SCHEMA`.`COLUMNS`
WHERE `TABLE_SCHEMA`='blog_samples'
AND `TABLE_NAME`='milk_production'");
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial', 'B', 5);
foreach ($header as $heading) {
foreach ($heading as $column_heading)
$pdf->Cell(20, 6, $column_heading, 1);
}
foreach …我使用angular $ http从服务器下载文件.文件类型可以不同.我应该设置请求标头以进行身份验证.下载完成后,文件已损坏!这是我在客户端的代码来保存文件:
getFile: function(file) {
$http({
method: 'GET',
url: 'download' + "/" + file.name,
headers: {
"X-AUTH-TOKEN": "my-token",
Accept: "*/*",
}
}).success(function(data) {
var fileBlob = new Blob([data], {
type: '*/*;charset=utf-8'
});
saveAs(fileBlob, file.name);
}).error(function(err) {
console.log('err', err);
});
}