BLOB URL 사용자 지정 이름

BLOB URL 사용자 지정 이름

입력 파라미터를 취득하여 백엔드로 송신하는 Angular 어플리케이션이 있습니다.처리결과는 pdf파일로 새로운 탭에서 열고 싶습니다.

이 작업을 수행하는 코드는 다음과 같습니다.

myService.getDocument(document)
  .then(function(response) {
    if (response.error) {
      // Error handling goes here
    } else {
      var file = new BLob([response.data), {type: 'application/pdf'});
      var fileURL = URL.createObjectURL(file);
      $window.open(fileURL, '_blank_');
    }
  });

모든 것이 정상적으로 동작하지만 브라우저의 URL에는 다음과 같이 랜덤하게 생성된 문자열이 표시됩니다.

blob:http://localhost:3000/85cad96e-e44e-a1f9-db97a96ed3fe

최종 사용자에게는 그다지 좋지 않은 것 같습니다.사용자에게 의미 있는 것을 표시하는 것을 선호합니다.다음은 예를 제시하겠습니다.

blob:ftp://localhost:3000/my_document_name_or_whatever

JS는 처음이고, Angular는 처음이고, HTML은 처음이고, 제 질문이 너무 순진하게 들리지 않기를 바랍니다.

잘 부탁드립니다.

단답형입니다. 안 됩니다.

이것은 브라우저가 당신의 blob을 저장한 메모리를 가리키는 주소이며, 사용자가 입력 type=file을 통해 파일을 업로드한 경우 원본 파일에 대한 포인터입니다.

이것은 어쩐지 의도적인 것이다.이러한 BLOB를 여러 개 생성할 수 있습니다.같은 Blob으로부터의 URL.파일명을 URI 로서 사용하는 경우는 사용할 수 없습니다.

이론적으로는 Blob으로 리다이렉트하는 페이지를 동적으로 작성할 수 있습니다.URI, 이 리다이렉션페이지에 이름을 붙일 수 있습니다.하지만 이건 그냥 이론일 뿐이지 내가 직접 해보려고 한 적은 없어

개념의 대략적인 증명은 이 플런커에서 확인할 수 있습니다.분명히 blobRename.html을 동적으로 생성하고 원하는 이름으로 이름을 변경합니다.또한 브라우저가 이 페이지를 html 페이지라고 생각하도록 강제해야 합니다..html또, pdf 파일에서는 동작하지 않는 것 같습니다만, 브라우저 플러그인이 필요하기 때문에, 조금 더 작업을 진행하면, 뭔가 해킹할 가능성이 있습니다.

하지만 어쨌든, 이 훌륭한 API를 사용하는 웹 앱이 점점 더 많아짐에 따라 사용자들도 점점 더 익숙해질 것입니다.

위의 기타 조건 코드 안에 다음 코드를 삽입하십시오.

var file = new Blob([response.data], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);

// create <a> tag dinamically
var fileLink = document.createElement('a');
fileLink.href = fileURL;

// it forces the name of the downloaded file
fileLink.download = 'pdf_name';

// triggers the click event
fileLink.click();

저도 같은 것을 찾고 있었습니다만, 실제로 링크의 다운로드 속성을 추가하면 Chrome에서 트릭을 얻을 수 있습니다.IE에서는 아직 시도하지 않았습니다.

<a href="urlBlobData" download="fileTest.csv">Your file</a>

이것은 Angular 5의 예시입니다.

<a #link *ngIf="urlBlobData" [href]="urlData" target="_blank" rel="noopener" download="fileTest.csv">Your file</a>

당신에게도 잘 되길 바랍니다.

다른 가능한 해결책이 있지만, 그것만의 문제가 있습니다.실제로 브라우저 쿠키 저장소에 BLOB URL을 저장한 후 다른 탭에서 가져올 수 있습니다. 공유 작업자를 만들면 공유 작업자는 동일한 작업자에 연결됩니다.여기서 주의할 점은 cookie 값이 설정되어 있는 동안 blob이 사라질 수 있기 때문에 새로운 워커가 초기화되면 자동으로 실패합니다.워커 스크립트가 정상적으로 실행되고 있는지 어떤지를 테스트하고 정상적으로 실행되지 않은 경우 쿠키를 지우고 BLOB를 다시 작성하면 이 문제를 완화할 수 있습니다.단, 작업자가 메인 스레드에서 동작하고 있는지 여부를 알 수 있는 신뢰할 수 있는 방법은 없는 것 같습니다만, 예를 들어 지연/타임아웃을 사용하여 작업자의 에코를 기다리는 것은 가능한 일이라고 생각합니다.

window.open을 사용하여 파일명을 설정하는 방법에서 취득.

다른 탭에서 열리지 않는 파일을 다운로드하는 것을 인정.

var downloadLink = document.createElement("a");
downloadLink.href = myBlob;
downloadLink.download = "myFile.pdf";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

아래를 추가하여 파일 이름을 추가/전달할 수 있지만 새 탭에서 여는 대신 파일을 다운로드하지만 적어도 사용자는 적절한 이름의 파일을 얻을 수 있습니다.

//import and inject Renderer2
import { Renderer2 } from '@angular/core';

let downloadLink = this.renderer.createElement('a');

//this converts binary data to a pdf
downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));

//you can pass filename here
   downloadLink.setAttribute('download', filename); 
   document.body.appendChild(downloadLink);
   downloadLink.click();

간단히 추가할 수 있습니다.setTimeoutBLOB가 새 탭에 로드된 후 페이지 제목을 변경하려면 다음과 같이 하십시오.

newTab.location.href = URL.createObjectURL(blob); 
setTimeout(function() {
    newTab.document.title = blob.name;
}, 10);

파일을 aws의 s3 버킷에 저장하고 대신 s3 링크를 보냅니다.S3는 파일에 메타데이터를 설정할 수 있도록 하기 때문입니다.

Content Disposition인 것 같습니다.

언급URL : https://stackoverflow.com/questions/41947735/custom-name-for-blob-url