在新标签页中打开PDF，保存文件的文件名错误 [英] Open PDF in new tab, saving file gives wrong file name

问题描述

有一个Angular 6应用程序，具有下载pdf文件的功能.它使用另一个Spring Boot应用程序中的REST API来下载文件.

There is an Angular 6 app having a feature to download pdf files. It uses REST API from another Spring Boot application to download files.

要求是我需要在新选项卡中打开pdf文件，并且在保存时应使用有意义的名称.

The requirement is that i need to open pdf file in new tab and while saving it shall have a meaningful name.

我也可以下载文件并在新标签页中打开.但是在保存文件时，它会从网址中获取名称.

I am able to get the file downloaded and open in new tab too. But while saving the file, it takes name from the url.

我尝试通过直接从浏览器中的REST API打开文件并保存它，以及从Angular应用程序获取blob并在新窗口中打开来进行尝试.两者都打开文件，但是在保存时会从URL中获取名称.

I tried by opening the file directly from REST API in browser and save it as well as getting blob and open in new window from angular app. Both open the files but while saving they take name from URL.

1. 角度-在新窗口中打开Blobblob: https://defg.com/89a0396e-994b-43d0-b3e3-aaa95d47db9f 如果我尝试下载打开的文件，建议使用名称保存89a0396e-994b-43d0-b3e3-aaa95d47db9f.pdf是否可以通过以下方法传递或设置文件名?

1. Angular - Open blob in new window blob:https://defg.com/89a0396e-994b-43d0-b3e3-aaa95d47db9f If i try to download opened file, it suggests to save with name 89a0396e-994b-43d0-b3e3-aaa95d47db9f.pdf Is there a way to pass or set filename in below approach?

var fileURL = window.URL.createObjectURL(file);window.open(fileURL，"_blank");

var fileURL = window.URL.createObjectURL(file); window.open(fileURL, "_blank");

API-采用加密的名称 https://abcd.com/ws/fileDownload/85C1E5010AFAEE5410FA74E8410AFAF54E8410CAFE54C0178如果我尝试下载打开的文件，则建议第一次使用正确的名称进行保存，将URL字符串显示为第二次尝试的名称，85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963.pdf

API - Takes Encrypted name https://abcd.com/ws/fileDownload/85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963 If i try to download opened file, it suggests to save with correct name for first time, shows string from url as name from second attempt, 85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963.pdf

检查到的响应，标题看起来不错，

Inspected response, headers look good,

Content-Disposition:内联；filename =" test.pdf"

Content-Disposition: inline; filename= "test.pdf"

任何建议都会有所帮助.预先感谢.

Any suggestions would be helpful. Thanks in advance.

推荐答案

您可以如下使用 file-saver 库:

import { saveAs } from 'file-saver';
...
awesomeDownloader(url: string, fileName: string) {
  const blobFile = functionsThatGetsTheBlob(url);
  saveAs(blobFile, fileName);
}
...

这篇关于在新标签页中打开PDF，保存文件的文件名错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！