相关疑难解决方法(0)

我有一个基于jquery的单页webapp.它通过AJAX调用与RESTful Web服务进行通信.

我正在努力完成以下任务:

1. 将包含JSON数据的POST提交到REST URL.
2. 如果请求指定了JSON响应,则返回JSON.
3. 如果请求指定了PDF/XLS/etc响应,则返回可下载的二进制文件.

我现在有1和2工作,客户端jquery应用程序通过基于JSON数据创建DOM元素来显示网页中返回的数据.从Web服务的角度来看,我也有#3工作,这意味着如果给出正确的JSON参数,它将创建并返回二进制文件.但我不确定在客户端javascript代码中处理#3的最佳方法.

是否有可能从这样的ajax调用中获取可下载的文件？如何让浏览器下载并保存文件？

$.ajax({
    type: "POST",
    url: "/services/test",
    contentType: "application/json",
    data: JSON.stringify({category: 42, sort: 3, type: "pdf"}),
    dataType: "json",
    success: function(json, status){
        if (status != "success") {
            log("Error loading data");
            return;
        }
        log("Data loaded!");
    },
    error: function(result, status, err) {
        log("Error loading data");
        return;
    }
});

服务器响应以下标头:

Content-Disposition:attachment; filename=export-1282022272283.pdf
Content-Length:5120
Content-Type:application/pdf
Server:Jetty(6.1.11)

另一个想法是生成PDF并将其存储在服务器上并返回包含该文件的URL的JSON.然后,在ajax成功处理程序中发出另一个调用,执行以下操作:

success: function(json,status) {
    window.location.href = json.url;
}

但这样做意味着我需要对服务器进行多次调用,而我的服务器需要构建可下载的文件,将它们存储在某处,然后定期清理该存储区域.

必须有一种更简单的方法来实现这一目标.想法？

编辑:在查看$ .ajax的文档后,我看到响应dataType只能是其中之一xml, html, script, json, jsonp, text,所以我猜测没有办法使用ajax请求直接下载文件,除非我在使用中嵌入二进制文件@VinayC答案中建议的数据URI方案(这不是我想做的事情).

所以我想我的选择是:

1. 不使用ajax而是提交表单帖子并将我的JSON数据嵌入到表单值中.可能需要搞乱隐藏的iframe等.

2. 不使用ajax而是将我的JSON数据转换为查询字符串以构建标准GET请求并将window.location.href设置为此URL.可能需要在我的单击处理程序中使用event.preventDefault()以防止浏览器从应用程序URL更改. …

当强制通过window.location下载时,如何在JavaScript中设置blob文件的名称？

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

运行上面的代码会立即下载文件而不会刷新页面,如下所示:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

我想将文件名设置为my-download.json.

如果我们在nodeJS服务器上,我们可以编写一个头,设置一个mime类型,并发送它:

res.header("Content-Disposition", "attachment;filename="+name+".csv"); 
res.type("text/csv");
res.send(200, csvString);

并且由于标题,浏览器将为命名的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);

我的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;
    }

我发送和接收csv文件的angularjs如下所示:

$scope.save = function () {
            var csvInput= extractDetails();

            // File is an angular resource. We call its save method …

在我们的应用程序中,我们需要实现以下场景

1. 请求从客户端发送
2. 服务器处理请求并生成文件
3. 服务器返回文件作为响应
4. 客户端浏览器显示文件下载弹出对话框,允许用户下载文件

我们的应用程序是基于ajax的应用程序,因此我们发送ajax请求(如使用jquery.ajax()函数)非常简单方便.

但是在googilng之后,事实证明只有在使用非ajax POST请求时才能进行文件下载(就像在这个流行的SO线程中所描述的那样).因此,我们需要实现更加丑陋且更复杂的解决方案,这需要form使用嵌套的隐藏字段构建HTML结构.

有人可以用简单的话来解释为什么ajax请求不能用于下载文件？这背后的机制是什么？

我正在使用Spring boot和Angular JS.我有一个用于下载文件的Spring REST控制器.当我使用http:// localhost:8080 /下载调用它时,它可以工作并下载文件.现在我有一个按钮,当我点击它时,我将下载该文件.所以我在我的角度js控制器中写了一个函数来获取我的spring web服务的url但是当我测试它时没有发生任何事情.我该怎么做才能解决这个问题？有没有更好的方法使用Spring和Angular下载文件？

 /**
 * Size of a byte buffer to read/write file
 */
private static final int BUFFER_SIZE = 4096;
private String filePath = "C:\\Users\\marwa\\Desktop\\marwa\\gg.jpg";

/**
 * Method for handling file download request from client
 */
@RequestMapping (value="/download", method=RequestMethod.GET )
public void doDownload(HttpServletRequest request,
        HttpServletResponse response) throws IOException {

    // get absolute path of the application
    ServletContext context = request.getServletContext();
    String appPath = context.getRealPath("");
    System.out.println("filepath = " + filePath);

    // construct the …

文件未在浏览器下载.我正在准备文件并将其写入响应的输出流.

Rest API在那里:

@RequestMapping(value = "/export-companies",
        method = {RequestMethod.GET, RequestMethod.HEAD})
    @Timed
    public void downloadCompanies(HttpServletResponse response) throws URISyntaxException {
        HSSFWorkbook workbook = new HSSFWorkbook();
        HSSFSheet sheet = workbook.createSheet("Sample sheet");

        Map<String, Object[]> data = new HashMap<String, Object[]>();
        data.put("1", new Object[] {"Emp No.", "Name", "Salary"});
        data.put("2", new Object[] {1d, "John", 1500000d});
        data.put("3", new Object[] {2d, "Sam", 800000d});
        data.put("4", new Object[] {3d, "Dean", 700000d});

        Set<String> keyset = data.keySet();
        int rownum = 0;
        for (String key : keyset) {
            Row row = sheet.createRow(rownum++);
            Object [] …