Opening PDF file in new tab angular 4? - javascript

I tried opening a PDF file using the window.open(), but the window opens and closes automatically and the file is downloaded like any other file. How to make the pdf file open in new tab? There are no ad blockers installed.

From #barbsan idea, I changed the http headers and received a blob and used that to display the blob as pdf using window.open(). It worked.
Here is my sample code.
In service file
downloadPDF(url): any {
const options = { responseType: ResponseContentType.Blob };
return this.http.get(url, options).map(
(res) => {
return new Blob([res.blob()], { type: 'application/pdf' });
});
}
In component file
this.dataService.downloadPDF(url).subscribe(res => {
const fileURL = URL.createObjectURL(res);
window.open(fileURL, '_blank');
});

One liner solution to open a pdf file in new tab. You just need to have file url and use this function on button click.
window.open(url, '_blank');

you can display pdf fle in new tab by the line:
window.open(fileUrl, '_blank');
The fileUrl is a variable that contains the file path.

For the Angular 13 version
downloadPDF(url: string): Observable<Blob> {
const options = { responseType: 'blob' as 'json' };
return this.httpClient
.get<Blob>(url, options)
.pipe(map(res => new Blob([res], { type: 'application/pdf' })));
}

you need user the "target="_blank" in the tag ;
exemple: <a target="_blank" href="https://www.google.com/"> </a>

How to make it work in Angular 10, changes just a little bit, this in the service file from #K Harish answer
import { map } from 'rxjs/operators';
return this.http.get(url, options).pipe(map(
(res) => {
return new Blob([res], { type: 'application/pdf' });
}));

Related

Laravel 9 and Javascript: how to download a file returned from Storage::download()

DISCLAIMER: Before creating this question, I've checked here, here and here, and also checked Laravel docs.
Context
Laravel 9 full-stack
No JS framework on front-end, which means I'm using vanilla JS
The folders on Storage are setted like this:
storage
app
public
folder1
folder1A
folder1B
folder1C
etc
The files stored in each folder1X are .pdf format and I don't know its names.
No folders are empty, nor with invalid/corrupted files.
The problem
I have a FileController.php to download files that are inside a folder1X/ directory. The method to download it is as follows:
public function downloadFileFromStorage(Request $request): mixed
{
$dirpath = $request->dirpath; // dirpath = public/folder1/folder1X.
$files = Storage::allFiles($dirpath);
return response()->download(storage_path('app\\' . $files[0]));
}
(Note: dirpath is sent in a axios request by client and is also fetched from database on a previous request)
My Javascript CLI needs to enable the download of this file. The download is enabled by clicking on a button. The button calls downloadPDF(dirpath) which works as follows:
function downloadPDF(dirpath) {
axios.post('/download-pdf-file', { dirpath })
.then(
success => {
const url = success.data
const a = document.createElement('a')
a.download = 'file.pdf'
a.href = url
a.click()
},
error => {
console.log(error.response)
}
)
}
But, when I run this function, I get a about:blank#blocked error.
Attempts
Changed the a HTML DOM approach to a window.open(url) on client;
Changed response() to Storage::download($files[0], 'file-name.pdf'), and with this I also tried using Blob on client as follows:
success => {
const blob = new Blob([success.data], { type: 'application/pdf' })
const fileURL = URL.createObjectURL(blob)
window.openURL(fileURL)
},
Also mixed Blob with the a HTML DOM approach;
Changed storage_path argument to /app/public/ before concatenating to $files[0].
UPDATE
Following tips from #BenGooding and #cengsemihsahin, I changed files to the following:
JS
// FileDownload is imported on a require() at the code beginning
function downloadPDF(dirpath) {
axios({
url: '/download-pdf-file',
method: 'GET',
responseType: 'blob',
options: {
body: { dirpath }
}
}).then(
success => {
FileDownload(success.data, 'nota-fiscal.pdf')
}
)
}
PHP:
public function downloadFileFromStorage(Request $request): mixed
{
$dirpath = $request->dirpath; // dirpath = public/folder1/folder1X.
$files = Storage::allFiles($dirpath);
return Storage::download($files[0], 'filename.pdf');
}
and now it downloads a corrupted PDF that can't be opened.
Finally found the issue, and it was here:
axios({
url: '/download-pdf-file',
method: 'GET',
responseType: 'blob',
options: { // here
body: { dirpath } // here
}
})
Laravel's Request arrow operator -> can't fetch a GET body sent through options (At least, not on $request->key fashion; see more about it here) thus making me download a corrupted file - it wasn't fetching any file on Laravel as it didn't get any path at all.
Here is the solution I came with:
As I want to get a file in a route that doesn't change except for the 1X at folder1X, I'm processing the path obtained and sending the 1X as a GET query param:
let folderNumber = dirpath.split('/')
folderNumber = folderNumber[folderNumber.length].replaceAll('/', '')
axios({
url: '/download-pdf-file?folder=',
method: 'GET',
responseType: 'blob'
})
This way I don't pass the whole path to back-end and it's possible to get folderNumber by using $request->query():
public function downloadFileFromStorage(Request $request): mixed
{
$folderNumber = $request->query('folderNumber');
$folderPath = '/public/folder1/folder' . $folderNumber . '/';
$files = Storage::allFiles($folderPath);
return Storage::download($files[0], 'file-name.pdf');
}
In a nutshell:
To download files, use GET requests;
To send arguments within GET requests, use query parameters and fetch them with $request->query('keyname') (or find out another way. Good luck!);

Upload file Vue 3 and Django REST

I dont get if i work with request correctly, after upload all files is 1 KB and i cant open them. How to create correct file? If i save file as .doc i can see:
------WebKitFormBoundaryt3UjlK5SVq8hgppA
Content-Disposition: form-data; name="file"
[object FileList]
------WebKitFormBoundaryt3UjlK5SVq8hgppA--
So my functions to submit in js file:
async submitFiles() {
let formData = new FormData();
formData.append('file', this.file);
console.log(this.file)
axios.put(`/api/v1/myapp/upload/${this.file[0].name}`,
formData,
{
headers: {
'Content-Disposition': 'attachment',
'X-CSRFToken': await this.getCsrfToken(),
},
}
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
console.log('FAILURE!!');
});
},
To handle change of file in form
fileChanged(file) {
this.file = file.target.files
},
And finally my view.py
class FileUploadView(APIView):
parser_classes = [FileUploadParser]
def put(self, request, filename, format=None):
file_obj = request.data['file']
handle_uploaded_file(file_obj)
return Response({'received data': request.data})
Where
def handle_uploaded_file(f):
with open('path/to/my/folder/' + str(f.name), 'wb+') as destination:
for chunk in f.chunks():
destination.write(chunk)
[object FileList]
Oh, you serialized the whole FileList.
Change to: formData.append('file', this.file[0]);
If this won't work you may need to read the file's content.
Edit: it should be enough, according to MDN:
The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.

Events are not triggered when open pdf in external window

I have a problem with events, when open pdf in external window. They are not triggered even with 'viewerId' attribute. Here is my code:
HTML
<a *ngIf="document.s3_link" class="document-title" (click)="openDocument(document)">{{ document.description }}</a
>
<ng2-pdfjs-viewer
#externalPdfViewer
viewerId="MyUniqueID"
[externalWindow]="true"
(onDocumentLoad)="highlightSearchTerm()"
></ng2-pdfjs-viewer>
TypeScript
openDocument(document): void {
this.getDocumentBlob(document.s3_link).subscribe(res => {
this.externalPdfViewer.pdfSrc = res
this.externalPdfViewer.downloadFileName = document.description
this.externalPdfViewer.refresh()
})
}
getDocumentBlob(link): Observable<any> {
let headers = new HttpHeaders()
headers = headers.set("Accept", "application/pdf")
return this.http.get(link, { headers: headers, responseType: "blob" })
}
highlightSearchTerm() {
this.externalPdfViewer.PDFViewerApplication.findController.executeCommand(
"find",
{
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: this.initQuery,
}
)
}
Found this in documentation in one of the issues.
When you are opening PDF in a new window, events cannot be emitted back to former window.
Please see this SO: Communication between tabs or windows
Documentation needs to be updated to reflect this. Using above techniques, it may be achieved, but that would require an improvement/implementation.

How can I display a pdf\jpg file in a new page using Blob when AdBlock extension is install in the browser

I am trying to download a file from the server and using Blob to display this file in a new tab, but the AdBlock extension is blocking the browser.
this.documentsService.downloadFiles(fileName).subscribe(file => {
let newBlob;
if(file.filename.match('.pdf')) {
newBlob = new Blob([file ], { type: "application/pdf" });
} else {
newBlob = new Blob([file ], { type: "image/jpg" });
}
const data = window.URL.createObjectURL(newBlob);
window.open(data, '_blank');
});

PDF in iframe showing title as 'Anonymous'

I am using Angular2. I am getting PDF response as BLOB from backend API. The PDF is showing fine in iframe but it is showing title as 'anonymous'. Can someone please guide?
html code:
<iframe id="showPDFIframe" allowtransparency="false" title="TestPDF" width="100%" height="800" [attr.src]="dataLocalUrl" type="application/pdf"></iframe>
pdf.component.ts
pdfDownload: any;
protected dataLocalUrl: SafeResourceUrl;
ngOnInit() {
this.requestOptions = this.createRequestOptions();
this.requestOptions.responseType = ResponseContentType.Blob;
this._pdfModelService.showPDF(this.requestOptions)
.subscribe( (res) => {
this.pdfDownload = res;
this.dataLocalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(res));
}, err => {
console.log(err);
})
}
pdfModelService.ts
showPDF(options?: RequestOptions): any {
return this._http.get(this.endpoints.showPDF.uri, options)
.map( (res) => {
return new Blob([res], { type: 'application/pdf' })
});
}
See below image 'Anonymous' is showing
Note: backend API gives the bytes which we cast in BLOB.
have you tried providing title in the options:
showPDF(options?: RequestOptions): any {
return this._http.get(this.endpoints.showPDF.uri, options)
.map( (res) => {
return new Blob([res], { type: 'application/pdf', title: 'testpdf' })
});
}
Although I am not certain why the specified title field "TestPDF" in the code is not appearing on the page, the "(anonymous)" value that is displaying could simply be pulling the meta data from the PDF file itself. A possible solution would be to check the title field in the PDF document properties to set the title there. In Adobe Acrobat, from the file menu select Properties > Description to check/update the title field.
Reference article from W3.org: https://www.w3.org/TR/WCAG20-TECHS/PDF18.html

Categories