如何在下载前预览服务器上的文件？收到错误：不允许加载本地资源：blob

Question

更新：

为了清楚起见，我们使用<embed #reportPdf width="100%" height="800">和

this.pdf.nativeElement.src = this._window.URL.createObjectURL(this.re);

它可以在Safari和Firefox上运行，但是当在Chrome上加载时，它显示如下，如果我们点击打开按钮，它会抛出错误不允许加载本地资源：blob 原文：

我正在开发一个Angular项目，并要求在从服务器下载之前预览文件。

我们的后端是Spring启动，现在下载功能正常，但我不知道如何实现预览。

一些想法： - 通过URL访问服务器文件，如何使其工作？我们需要在服务器端配置吗？

前端：

download(sessionGuid: string) {
    return this.http.get(`${this.fileUrl}/files/${fileId}`, {
        headers: new HttpHeaders({
            'Content-Type': 'application/pdf'
        }),
        responseType: 'blob'
    });
}

后端：

private void downloadFile(HttpServletResponse response, String fileFullName) throws IOException {
    File file = new File (fileFullName);
    if (file.exists()) {
        String mimeType = URLConnection.guessContentTypeFromName(file.getName());
        if (mimeType == null) {
            mimeType = "application/octet-stream";
        }
        response.setContentType(mimeType);
        response.setHeader("content-Disposition", String.format(DISP_TYPE+" filename=" + file.getName()));
        response.setContentLength((int) file.length());
        InputStream inputStream = new BufferedInputStream(new FileInputStream(file));
        FileCopyUtils.copy(inputStream, response.getOutputStream());
    }
    else {
        response.sendError(HttpServletResponse.SC_NOT_FOUND);
    }
}

Answer 1

您应该将PDF文件渲染为图像（例如第一页）。然后你可以通过<img src="..."></img>进行预览