javascript - 显示带有返回数据的 pdf - 而不是 iframe - 通过使用 ajax 调用 - JQuery

Question

This问题没有回答我的情况，因为它没有提供解决方案，我想知道现在(到 2018 年)我们是否有更好的方法。

所以问题是我想调用正在创建 pdf 文件(不是物理上)并将文件内容作为流提供给 http 响应 的服务器。现在，通过对此 Web 服务的 ajax 调用，如果可能，我想将返回的数据显示为 pdf 文件。

function callProducePdf(webServiceUrl, resultAreaId){
        var jqxhr = $.ajax({
            type:"GET",
            url: webServiceUrl
        });

        jqxhr.done(function(data){
            //data contains the pdf in inputStream form
            //how can I display the pdf in resultAreaId which is a div?             

            //if I do something like this it works but this is not what I want
            var iframe = $('<iframe height="500px">');
            iframe.attr('src', webServiceUrl);
            resultAreaId.prepend(iframe, "<br>");
        });

        jqxhr.fail(function(){
            //I have this function defined which is working fine
            appendError(resultAreaId);
        });
    }

服务器端代码:

@GetMapping("/producePdfWithDefault")
public ModelAndView producePdfWithDefault(HttpServletRequest request, HttpServletResponse response) {
    Resource resource = new ClassPathResource("/path/a/static/pdf/file.pdf");       
    InputStream resourceAsStream;
    try {
        resourceAsStream = resource.getInputStream();
        byte[] resourceInBytes = Base64.encodeBase64(IOUtils.toByteArray(resourceAsStream));
        response.reset();
        response.setContentType("application/pdf");
        response.setHeader("content-disposition","inline; filename=documentPreview.pdf");
        response.setContentLength(resourceInBytes.length); 
        OutputStream output = response.getOutputStream();
        output.write(resourceInBytes);
        output.flush();
        output.close();
    } catch (IOException e) {
            response.setStatus(500);
    }
    return null;
}

非常感谢任何帮助。谢谢..

Answer 1

我会做这样的事情......

...
jqxhr.done(function(data) {
  var blob = new Blob([data]);
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = "<ANY_FILENAME_WITH_EXTENSION>";
  link.click();
}),
...

(未经测试)

客户端将下载文件并在默认的 PDF 阅读器中打开它。