I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.
Related
Succesfully i have made to Upload files into firebase storage, but now i want to display all files in table and to have option to download each file.I've read the documentation in firebase but it won't work.When i click the button which function is to get all files and the i want to visualize them in table which users can see:
Show file function:
showFileUrl(){
storageRef.child('UploadedFiles/').listAll().then(function(res) {
res.items.forEach(function(folderRef) {
console.log("folderRef",folderRef.toString());
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "downloadURL");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
}
xhr.send();
});
}).catch(function(error) {
});
}
This is log of the network which i found when debugging.What i need to do to get all data and visualize it in table and to hava a download button and when is pressed to download the file
Network log:
Storage in firebase:
Blob object of the files:
Your code gets a list of all the files, but it doesn't actually to anything to read the data for each file.
When using the Web client SDK, the only way to get the data for a file is through a download URL as shown here. So you'll need to:
Loop through all the files you get back from listAll() (you're already doing this).
Call `getDownloadURL as shown here, to get a download URL for each file.
Then use another library/function (such as fetch()/XMLHTTPRequest) to read the data for each file.
Alternatively, if your files are images, you can stuff the download URL in an img tag as the preview.
We would like to distribute a set of PDF files within our application. Originally we were opening these with a React PDF viewer however the users really need to be able to save these files to their computer so they can read/annotate/print these in their own time etc.
We are using Create React App within Electron - do you have any suggestions?
Thanks!
Managed to get this working using the following method:
PDFLink= (e)=> { // Open PDF with `shell` method
console.log("Clicked PDF: ");
var attrs=e.currentTarget.attributes;
const shell = window.require('electron').shell;
const remote = window.require('electron').remote;
const appPath = remote.app.getAppPath();
console.log('appPath: ', appPath);
for (var a=0;a<attrs.length;a++)
{
console.log(attrs[a].name+"="+attrs[a].value);
switch (attrs[a].name)
{
case 'data-pdf':
//console.log(app.getAppPath());
shell.openItem(appPath+'\\public\\pages\\test1.pdf');
break;
default:
break;
}
}
}
If the PDFs are shipped with your app, you could just use the shell module to open them: shell.openItem(fullPath).
shell
Manage files and URLs using their default applications.
shell.openItem(fullPath)
Returns Boolean - Whether the item was successfully opened
Open the given file in the desktop's default manner.
I've created a new React application. As it stands, it just the template from Visual Studio; New Project -> Asp.Net Core -> React.
When the application runs, there is an element of dynamic content displayed on the screen. What I want to be able to do is to get some kind of HTML dump of this page, such that I could paste it into a static web application and have the same screen rendered.
I've had a look around, and have found a few tools, such as react-snapshot which appear to do what I want; however, it seems to be that you're in or out; that is, you either have it dynamically rendered or statically rendered. I just want a static dump of the HTML, and would like to leave the rendering as is.
For example, inside my Javascript, I have the following code:
const htmlSection = document.getElementById("MyHtml");
// Export Html Here
Is this kind of thing possible and, if so, how can it be achieved in code?
I did like this
const handleExport = () => {
const link = document.createElement("a");
// Create a blog object with the file content which you want to add to the file
const file = new Blob([document.getElementsByTagName('html')[0].innerHTML], { type: 'text/plain' });
// Add file content in the object URL
link.href = URL.createObjectURL(file);
// Add file name
link.download = "sample.html";
// Add click event to <a> tag to save file.
link.click();
URL.revokeObjectURL(link.href);
}
The HTML and module style can be exported, but the problem is that is javascript event can not be remained anymore.
You can use the fs module to read your index file something like this:
fs.readFileSync(path[, options])
I am trying to append the recorded video which is blob object into quill editor but the video which is appended in the editor is not playable.
Able to see only the blob object getting printed in the quill editor. If i try to open the contents in the browser it is working fine. Any suggestions?
enter image description here
well,according to this issue,
I think you maybe need to overwrite the video module's sanitize method to make it work,for image it can work like this:
var Image = Quill.import('formats/image')
Image.sanitize = function(url) {
return url
}
so as I guess, following things maybe useful:
var Video = Quill.import('formats/video')
Video.sanitize = function(url) {
return url
}
and you may need provide blob url to make it work
I have a JSON array of objects that is a result of a function in nodejs. I use json2xls to convert that to an excel file, and it downloads to the server (not in a public folder, and is formatted correctly in Excel).
I would like to send a response to the frontend with the json results (to display as a preview) and show a button they can click to download the xlsx file OR display the JSON results and automatically download the file.
But I can't get it, and I've tried so many things I'm going crazy.
My controller code (the part that creates the xls file):
var xls = json2xls(results,{});
var today = (new Date()).toDateString('yyyy-mm-dd');
var str = today.replace(/\s/g, '');
var fileName = "RumbleExport_"+ str +".xlsx";
var file = fs.writeFileSync(fileName,xls,'binary');
res.download('/home/ubuntu/workspace/'+file);
The frontend controller:
vm.exportData = function(day, event, division) {
console.log('Export registrations button pressed.', vm.export);
//send the search parameters to the backend to run checks
$http.post('/api/exportData', vm.export).then(function(response){
vm.results = response.data;
console.log("Results",response);
vm.exportMessage = "Found " + vm.results.length + " registrations.";
})
.catch(function(error){
vm.exportError = error.data;
});
};
The view:
//display a button to download the export file
<a target="_self" file="{{vm.results}}" download="{{vm.results}}">Download Export File</a>
Someone please put me out of my misery. All the classes I've taken and none have covered this.
I FINALLY got it! And since I searched forever trying to make something work, I'll share the answer:
On the backend:
//save the file to the public/exports folder
var file = fs.writeFileSync('./public/exports/'+fileName,xls,'binary');
//send the results to the frontend
res.json(200).json({results:results, fileName: fileName});
On the frontend, use HTML to download a link to the file:
<a href="exports/{{fileName}}" download>Save File</a>