使用 angular 将文件流式传输到文件系统 7
Streaming file to file system using angular 7
我正在尝试使用 angular 开发文件下载 7. 我正在使用 HttpClient
和 FileSaver
进行下载。我遇到的问题是,当 HttpClient 向服务器发出下载请求时,它等待整个响应完成(将整个文件保存在浏览器内存中)并且 save dialogue
仅出现在最后。我相信在大文件的情况下,将其存储在内存中会导致问题。有没有一种方法可以在收到状态 OK 后立即显示 save dialogue
并将文件流式传输到文件系统。我还需要在请求中发送授权 header。
我的服务器端代码:
@RequestMapping(value = "/file/download", method = RequestMethod.GET)
public void downloadReport(@RequestParam("reportId") Integer reportId, HttpServletResponse response) throws IOException {
if (null != reportId) {
JobHandler handler = jobHandlerFactory.getJobHandler(reportId);
InputStream inStream = handler.getReportInputStream();
response.setContentType(handler.getContentType());
response.setHeader("Content-Disposition", "attachment; filename=" + handler.getReportName());
FileCopyUtils.copy(inStream, response.getOutputStream());
}
}
我的客户代码(angular)
downloadLinksByAction(id, param) {
this._httpClient.get(AppUrl.DOWNLOAD, { params: param, responseType: 'blob', observe: 'response' }).subscribe((response: any) => {
const dataType = response.type;
const filename = this.getFileNameFromResponseContentDisposition(response);
const binaryData = [];
binaryData.push(response.body);
const blob = new Blob(binaryData, { type: dataType });
saveAs(blob, filename);
}, err => {
console.log('Error while downloading');
});
}
getFileNameFromResponseContentDisposition = (res: Response) => {
const contentDisposition = res.headers.get('content-disposition') || '';
const matches = /filename=([^;]+)/ig.exec(contentDisposition);
return matches && matches.length > 1 ? matches[1] : 'untitled';
};
回答我自己的问题,希望它能帮助遇到同样问题的人。
我发现没有任何方法可以通过 ajax 调用直接启动流式传输到文件系统。我最终做的是创建一个名为 /token
的新端点。此端点将采用文件下载所需的参数并创建 JWT 签名令牌。此令牌将用作 /download?token=xxx
端点的查询参数。我用 .authorizeRequests().antMatchers("/download").permitAll()
从 spring 安全绕过了这个端点。由于 /download 需要签名的令牌,我只需要验证签名对于真实的下载请求是否有效。然后在客户端我刚刚创建了一个动态 <a>
标签并触发了一个 click()
事件。
令牌提供者:
import com.google.common.collect.ImmutableMap;
import com.vh.dashboard.dataprovider.exceptions.DataServiceException;
import com.vh.dashboard.dataprovider.exceptions.ErrorCodes;
import com.vh.dashboard.security.CredentialProvider;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import io.jsonwebtoken.impl.TextCodec;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import java.util.Date;
import java.util.Map;
@Component
public class TokenProvider {
@Value("${security.jwt.download.signing-key}")
private String tokenSignKey;
@Autowired
CredentialProvider credentialProvider;
private static int VALIDITY_MILISECONDS = 6000000;
public String generateToken(Map claimsMap) {
Date expiryDate = new Date(
System.currentTimeMillis() + (VALIDITY_MILISECONDS));
return Jwts.builder().setExpiration(expiryDate)
.setSubject(credentialProvider.getLoginName())
.addClaims(claimsMap).addClaims(
ImmutableMap
.of("userId", credentialProvider.getUserId()))
.signWith(
SignatureAlgorithm.HS256,
TextCodec.BASE64.encode(tokenSignKey)).compact();
}
public Map getClaimsFromToken(String token) {
try {
return Jwts.parser()
.setSigningKey(TextCodec.BASE64.encode(tokenSignKey))
.parseClaimsJws(token).getBody();
} catch (Exception e) {
throw new DataServiceException(e, ErrorCodes.INTERNAL_SERVER_ERROR);
}
}
}
客户代码:
this._httpClient.post(AppUrl.DOWNLOADTOKEN, param).subscribe((response: any) => {
const url = AppUrl.DOWNLOAD + '?token=' + response.data;
const a = document.createElement('a');
a.href = url;
//This download attribute will not change the route but download the file.
a.download = 'file-download';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
我正在尝试使用 angular 开发文件下载 7. 我正在使用 HttpClient
和 FileSaver
进行下载。我遇到的问题是,当 HttpClient 向服务器发出下载请求时,它等待整个响应完成(将整个文件保存在浏览器内存中)并且 save dialogue
仅出现在最后。我相信在大文件的情况下,将其存储在内存中会导致问题。有没有一种方法可以在收到状态 OK 后立即显示 save dialogue
并将文件流式传输到文件系统。我还需要在请求中发送授权 header。
我的服务器端代码:
@RequestMapping(value = "/file/download", method = RequestMethod.GET)
public void downloadReport(@RequestParam("reportId") Integer reportId, HttpServletResponse response) throws IOException {
if (null != reportId) {
JobHandler handler = jobHandlerFactory.getJobHandler(reportId);
InputStream inStream = handler.getReportInputStream();
response.setContentType(handler.getContentType());
response.setHeader("Content-Disposition", "attachment; filename=" + handler.getReportName());
FileCopyUtils.copy(inStream, response.getOutputStream());
}
}
我的客户代码(angular)
downloadLinksByAction(id, param) {
this._httpClient.get(AppUrl.DOWNLOAD, { params: param, responseType: 'blob', observe: 'response' }).subscribe((response: any) => {
const dataType = response.type;
const filename = this.getFileNameFromResponseContentDisposition(response);
const binaryData = [];
binaryData.push(response.body);
const blob = new Blob(binaryData, { type: dataType });
saveAs(blob, filename);
}, err => {
console.log('Error while downloading');
});
}
getFileNameFromResponseContentDisposition = (res: Response) => {
const contentDisposition = res.headers.get('content-disposition') || '';
const matches = /filename=([^;]+)/ig.exec(contentDisposition);
return matches && matches.length > 1 ? matches[1] : 'untitled';
};
回答我自己的问题,希望它能帮助遇到同样问题的人。
我发现没有任何方法可以通过 ajax 调用直接启动流式传输到文件系统。我最终做的是创建一个名为 /token
的新端点。此端点将采用文件下载所需的参数并创建 JWT 签名令牌。此令牌将用作 /download?token=xxx
端点的查询参数。我用 .authorizeRequests().antMatchers("/download").permitAll()
从 spring 安全绕过了这个端点。由于 /download 需要签名的令牌,我只需要验证签名对于真实的下载请求是否有效。然后在客户端我刚刚创建了一个动态 <a>
标签并触发了一个 click()
事件。
令牌提供者:
import com.google.common.collect.ImmutableMap;
import com.vh.dashboard.dataprovider.exceptions.DataServiceException;
import com.vh.dashboard.dataprovider.exceptions.ErrorCodes;
import com.vh.dashboard.security.CredentialProvider;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import io.jsonwebtoken.impl.TextCodec;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import java.util.Date;
import java.util.Map;
@Component
public class TokenProvider {
@Value("${security.jwt.download.signing-key}")
private String tokenSignKey;
@Autowired
CredentialProvider credentialProvider;
private static int VALIDITY_MILISECONDS = 6000000;
public String generateToken(Map claimsMap) {
Date expiryDate = new Date(
System.currentTimeMillis() + (VALIDITY_MILISECONDS));
return Jwts.builder().setExpiration(expiryDate)
.setSubject(credentialProvider.getLoginName())
.addClaims(claimsMap).addClaims(
ImmutableMap
.of("userId", credentialProvider.getUserId()))
.signWith(
SignatureAlgorithm.HS256,
TextCodec.BASE64.encode(tokenSignKey)).compact();
}
public Map getClaimsFromToken(String token) {
try {
return Jwts.parser()
.setSigningKey(TextCodec.BASE64.encode(tokenSignKey))
.parseClaimsJws(token).getBody();
} catch (Exception e) {
throw new DataServiceException(e, ErrorCodes.INTERNAL_SERVER_ERROR);
}
}
}
客户代码:
this._httpClient.post(AppUrl.DOWNLOADTOKEN, param).subscribe((response: any) => {
const url = AppUrl.DOWNLOAD + '?token=' + response.data;
const a = document.createElement('a');
a.href = url;
//This download attribute will not change the route but download the file.
a.download = 'file-download';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}