javascript - 如何使用 Angular 和 Java 在浏览器的另一个页面中打开预览文件(pdf、docx、txt 等)

Question

我正在使用 Angular 7 和 Java 8 开发一个 Web 应用程序。我正在上传一个文件(pdf、docx、txt 等...)，但问题是我无法在浏览器的另一个页面中打开它通过 RESTful Web 服务。我收到错误 415 不支持的媒体类型。我尝试过 POST 和 GET 方法，但没有成功。这些是前端和后端的代码片段:

Angular 组件(由传递路径 + 文件名的按钮调用的方法示例:C/doc/foo.pdf)

download(doc) {     
     this.service.downloadFile(doc.path).subscribe(response => {
        if(response) {
           let blob = new Blob([response], { type: 'text/json; charset=utf-8' });
           const url= window.URL.createObjectURL(blob);
           window.open(url);
        }   
     });
 }

Angular 服务

downloadFile(path): Observable<Blob> {
    const url = '/download';
    return this.http.post<Blob>(url, path, { responseType: 'blob' as 'json' });
}

Java Controller

@PostMapping(value = "download", produces = { MediaType.APPLICATION_JSON_UTF8_VALUE })
@ResponseBody
public byte[] download(@RequestBody String path) {
    try {
        return this.provvedimentoService.getDownload(path);
    } catch (IOException | EgesException e) {
        e.printStackTrace();
        return null;
    }
}

Java 服务

public byte[] getDownload(String pathFile) throws EgesException, IOException {
    Path path = Paths.get(pathFile);
    if(path.toFile().exists())
        return Files.readAllBytes(path);
    else
        throw new EgesException(EgesExceptionConstants.WARNING_ACT_NOTFOUND_EXCEPTION);
}

Answer 1

你不能。浏览器没有任何内置的方式来查看 Word 文档，因此除非用户将浏览器配置为使用某些插件打开它(世界上 99% 的人还没有这样做)，否则浏览器将提示他们下载文件.

目前没有浏览器具有渲染 Word 文档所需的代码，而且据我所知，目前也没有用于渲染它们的客户端库。

但是，如果您只需要显示 Word 文档，但不需要编辑它，则可以通过 <iframe> 使用 Google 文档查看器显示远程托管 .pdf/ .doc/.docx /.txt等等

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

许多人使用这种方法来查看他们的文档文件。您可以在这里查看:How to display a word document using fancybox

<iframe width="100%" height="300px" src="https://docs.google.com/gview?url=http://index-of.co.uk/Google/googlehacking.pdf&embedded=true"></iframe>

您可以像这样添加文档文件 URL

https://docs.google.com/viewer?url=<url for your file>&embedded=true

这是您的文件网址 <url for your file>

您还有另一种方式查看 .pdf/ .doc/.docx /.txt等，例如 Microsoft Document viwer webapp 的 google iframe 系统。

你可以像这样使用它。

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

改编自“How do I render a Word document (.doc, .docx) in the browser using JavaScript? ”的解决方案。

这是一个嵌入式 Microsoft Office 文档，由 Office Online 提供支持。

embed.aspx?src=<your_will_be_your_document_file_url>' width='80%'

在此处添加您的文档文件 <your_will_be_your_document_file_url>