Потоковая передача файла в файловую систему с использованием Angular 7 - PullRequest
Новая
       24

Потоковая передача файла в файловую систему с использованием Angular 7

0 голосов
/ 29 января 2019

Я пытаюсь разработать файл для загрузки, используя angular 7. Я использую HttpClient и FileSaver для загрузки.У меня проблема в том, что, когда HttpClient делает запрос на загрузку на сервер, он ожидает завершения всего ответа (сохраняет весь файл в памяти браузера), а save dialogue появляется только в конце.Я считаю, что в случае больших файлов, хранение его в памяти вызовет проблемы.Есть ли способ показать save dialogue, как только будет получен статус OK, и передать файл в файловую систему.Мне также нужно отправить заголовок авторизации с запросом.

Мой код на стороне сервера: 

@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());
        }
    }

Код моего клиента (угловой) 

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';
  };

1 Ответ

0 голосов
/ 04 февраля 2019

Отвечая на мой собственный вопрос, надеясь, что это может помочь кому-то застрять с той же проблемой.Я понял, что нет никакого способа инициировать потоковую передачу напрямую в файловую систему с помощью вызова ajax.В итоге я создал новую конечную точку с именем /token.Эта конечная точка будет принимать параметры, необходимые для загрузки файла, и создавать подписанный токен JWT.Этот токен будет использоваться в качестве параметра queryParameters для конечной точки /download?token=xxx.Я обошел эту конечную точку из весенней безопасности с .authorizeRequests().antMatchers("/download").permitAll().Поскольку для / 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);
        }
...