如果我们在nodeJS服务器上,我们可以编写一个头,设置一个mime类型,并发送它:
res.header("Content-Disposition", "attachment;filename="+name+".csv");
res.type("text/csv");
res.send(200, csvString);
Run Code Online (Sandbox Code Playgroud)
并且由于标题,浏览器将为命名的csv文件创建下载.
当在浏览器中生成有用的数据时,将其置于CSV文件中的一种解决方案是使用ajax,将其上传到服务器,(可选择将其保存在那里)并让服务器使用这些头将其发送回csv在浏览器下载回来.
但是,我希望100%的浏览器解决方案不涉及与服务器的乒乓.
所以在我看来,可以打开一个新窗口并尝试使用META标记等效设置标题.
但是这在最近的Chrome中对我不起作用.
我确实得到一个新窗口,它包含csvString,但不作为下载.
我想我希望在底部标签中下载或在底部标签中下载一个空白的新窗口.
我想知道元标记是否正确或是否还需要其他标记.
有没有办法让这项工作没有将其强加给服务器?
用于在浏览器中创建CSV的JsFiddle(不工作 - 输出窗口但无法下载)
var A = [['n','sqrt(n)']]; // initialize array of rows with header row as 1st item
for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) }
var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
csvRows.push(A[i].join(',')); // unquoted CSV row
}
var csvString = csvRows.join("\n");
console.log(csvString);
var csvWin = window.open("","","");
csvWin.document.write('<meta name="content-type" content="text/csv">');
csvWin.document.write('<meta name="content-disposition" content="attachment; filename=data.csv"> ');
csvWin.document.write(csvString);
Run Code Online (Sandbox Code Playgroud) 我有一个工作的Angular.js应用程序,启用了HTML5模式.
$location.Html5mode(true).hashbang("!");
Run Code Online (Sandbox Code Playgroud)
我想要实现的是获取一些URL或<a>标签来执行正常的浏览行为,而不是使用HTML5历史记录API更改地址栏中的URL并使用Angular控制器处理它.
我有这个链接:
<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>
Run Code Online (Sandbox Code Playgroud)
我希望浏览器将用户重定向到,/auth/...以便用户重定向到身份验证服务.
有什么方法可以做到这一点吗?
我的API控制器正在返回一个csv文件,如下所示:
[HttpPost]
public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
{
var output = new byte[] { };
if (fieldParams!= null)
{
using (var stream = new MemoryStream())
{
this.SerializeSetting(fieldParams, stream);
stream.Flush();
output = stream.ToArray();
}
}
var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
FileName = "File.csv"
};
return result;
}
Run Code Online (Sandbox Code Playgroud)
我发送和接收csv文件的angularjs如下所示:
$scope.save = function () {
var csvInput= extractDetails();
// File is an angular resource. We call its save method …Run Code Online (Sandbox Code Playgroud) 我正在使用AngularJS,我正在尝试在php中生成PDF.这就是我在controller.js中的内容:
$scope.downloadPDF = function(){
$http.post('/download-pdf', { fid: $routeParams.fid })
.success(function(data, status, headers, config){
console.log("success");
})
.error(function(data, status, headers, config){
console.log("error");
});
};
Run Code Online (Sandbox Code Playgroud)
在我的php文件中,我有以下内容来创建带有FPDF库的PDF :
function download_pdf()
{
$id = $_POST['fid'];
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');
header('Content-Type: application/pdf');
header('Content-Disposition: attachment; filename=' . $id . '.pdf');
$pdf->Output('Order123.pdf', 'D');
}
Run Code Online (Sandbox Code Playgroud)
但请求是响应此而不是打开保存对话框来保存我的pdf.
%PDF-1.3 3 0 obj <> endobj 4 0 obj <> streamx3Rðâ2Ð35W(çrQÐw3T04Ó30PISpêZ*[¤(hx¤æää+çå¤(j*dÔ7Wstndstreamendobj 1 0 obj <endobj 5 0 obj <endobj 2 0 obj <</ProcSet [/ PDF/Text/ImageB/ImageC/ImageI]/Font …
我有一个按钮,onclick它将调用ajax函数.
这是我的ajax功能
function csv(){
ajaxRequest = ajax();//ajax() is function that has all the XML HTTP Requests
postdata = "data=" + document.getElementById("id").value;
ajaxRequest.onreadystatechange = function(){
var ajaxDisplay = document.getElementById('ajaxDiv');
if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("POST","csv.php",false);
ajaxRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajaxRequest.send(postdata);
}
Run Code Online (Sandbox Code Playgroud)
我根据用户输入创建了csv文件.创建后,我希望它提示下载或强制下载(最好是强制).我在php文件的末尾使用以下脚本来下载文件.如果我在一个单独的文件中运行此脚本,它工作正常.
$fileName = 'file.csv';
$downloadFileName = 'newfile.csv';
if (file_exists($fileName)) {
header('Content-Description: File Transfer');
header('Content-Type: text/csv');
header('Content-Disposition: attachment; filename='.$downloadFileName);
ob_clean();
flush();
readfile($fileName);
exit;
}
echo "done";
Run Code Online (Sandbox Code Playgroud)
但是如果我在csv.php的末尾运行它,它会将file.csv的内容输出到页面(进入ajaxDiv)而不是下载.
有没有办法强制下载csv.php末尾的文件?
我现在已经研究了很长一段时间了,找不到明确的答案/解决问题的方法.
情况是这样的:我正在向服务器发送一个帖子请求.响应包含其正文中的pcap文件的二进制文件.如何将其作为文件下载.
我的简化代码:
...
this.downloadPcap = function(timestamp){
var start = timestamp-10;
var end = timestamp+10;
var requestData = {"start": start, "end": end};
$http.post(serverUrl, requestData);
}
Run Code Online (Sandbox Code Playgroud)
这是通过单击触发的,其中我获取某个事件的时间戳,并且服务器在确切事件之前和之后的10秒内创建PCAP文件.
我收到一个带有长二进制的响应.也:
内容长度:134772
内容类型:application/pcap
现在我被告知如果标题是这样的,浏览器将自动开始将响应作为文件下载.它没有.
所以我对Blob和FileSaver的了解很少,但我觉得必须有一种更简单的方法来下载动态创建的文件.
有人可以指点我某个方向吗?有没有比包含更多库更简单的方法?
提前致谢
我想将数据导出为数据URI,只有当数据大小不超过当前浏览器支持的数据URI的最大大小时,才会将数据导出为我想要下载的文件.
document.location.href= "data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"+data
Run Code Online (Sandbox Code Playgroud)
当文件太大时,这有时会导致浏览器错误,但我希望在下载之前可以捕获错误(例如尝试其他方法).
如何在JS中获取最大数据URI大小?
回答者 - /sf/users/144494451/
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
var anchor = angular.element('<a/>');
anchor.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
target: '_blank',
download: 'filename.csv'
})[0].click();
}).
error(function(data, status, headers, config) {
// if there's an error you should see it here
});
Run Code Online (Sandbox Code Playgroud)
我实现了这个解决方案,使用angular从服务器下载文件到客户端.这在Google Chrome中完美运行.但是这个解决方案在Mozilla Firefox中不起作用.
谢谢