i am trying to open a pdf file in angularjs.actually i created a pdf file with database content and stored in the server location now i need to open a pdf file in the browser.I tried the bellow code.but not worked.
controller.js
$http.get(urlBase+'/generatePdfUrl')
.success(function (data) { // data is your url
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
$window.open(fileURL);
}).error(function(data){
alert(data);
});
I am getting my file URL correctly in data.but new tab open in the browser shows the below URL in browser address bar
blob:http://localhost:8080/c87ffb9f-b2cb-8741-a2d2-3c8af5609359
can any one help me to do this
$http.get(urlBase+'/generatePdfUrl').then(function(data){
$window.open(data);
});
Related
I'm have developed a SPA (Single Page Application) with AngularJS and I'm trying to force a pdf file download with AngularJS.
By the moment I only can open de pdf file in a new tab with the next code.
HTML view:
<a ng-click="download()"></a>
Controller:
$scope.download = function(){
$window.open('/cv.pdf', '_blank');
};
Is there any way to force the pdf download in the browser?
You can see this example in the following URLs:
www.juanmanuellopezpazos.es/curriculum (HTML View)
www.juanmanuellopezpazos.es/Curriculum.pdf (pdf file whose download I want to force)
I am done this in MVC.NET WITH ANGULAR JS.
It works fine with firefox also(Tested in version:50.0)
Write down following code in your function:
//in mvc view
<a ng-href="#" title="{{attachments.FileName}} " ng-click="download(attachment.FilePath,attachment.FileName)">{{attachments.FileName}} </a>
// in .js file
$scope.download = function download(pathoffile, filename) {
$http.get(pathoffile, {
responseType: "arraybuffer"
}).then(function (response) {
$scope.filedata = response.data;
var headers = response.headers();
headers['Content-Disposition'] = "attachment";
var blob = new Blob([response.data], { type: "octet/stream" });
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
This previous question should provide quite a lot of information on this.
(HTML) Download a PDF file instead of opening them in browser when clicked
In you're case I'd recommend just direct linking to the PDF and using the download attribute (http://www.w3schools.com/tags/att_a_download.asp).
Finally I got the solution with #kierandotco answer. The best way is something like this:
The download HTML5 attribute and target attribute with _self value do the trick.
I am trying to create an endpoint using NodeJS/express 4 that generates and send to the user a xlsx file.
To create the xlsx file I am using the node-xlsx library.
var xlsx = require('node-xlsx');
var buffer = xlsx.build([{
name: pasta,
data: data
}]);
res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
res.setHeader("Content-Disposition", "attachment; filename=" + pasta + ".xlsx");
res.write(buffer, 'binary');
return res.end();
And I am trying to download this file through an Angular app.
$http.post('https://endpoint/v1/' + folderName + '/reportExcel', {
responseType: 'arraybuffer'
})
.success(function(response) {
var blob = new Blob([response], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
var objectUrl = URL.createObjectURL(blob);
$window.open(objectUrl);
However, the file that is being downloaded is broken, so I can not open it.
Could it because you are using connect-livereload plugin? The plugin seems cause corrupted binary files being transferred. I've encountered the same, and solved it by adding 'ignore' when initiate connect-livereload plugin.
app.use(require('connect-livereload')({
ignore:['.xls', '.xlsx']
}));
See this post for detail: https://github.com/intesso/connect-livereload/issues/39
I posted an answer here: https://stackoverflow.com/a/41103999/1623249
Basically, you need to get the buffer from node-xlsx, convert it to base64 and then decode it in the client.
While trying to display a pdf blob on IE, I receive Access is denied error.
html file
<object ng-show="{{content}}" data="{{content}}" type="application/pdf"></object>
js file
$http.post('/api',{}, { responseType: 'arraybuffer' })
.success(function (response) {
var file = new Blob([response], { type: 'application/pdf' });
var fileUrl = window.URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl(fileUrl);
});
When using embed instead, acrobat pdf viewer is unable to view the temporary file.
I am using MEAN, in which I want to allow user to download zip file from server.
So basically I have to do following things:
Create csv files from certain data.
Store that file into some directory.
Compress these file to zip.
When a user clicks on the button, zipped file should be downloaded and readable.
I have achieved 1,2,3 completely, and 4 partially. In this I have been able to successfully download zip file, but this file is in corrupted format and I am not able to read this file.
My code for download functionality is here:
html:
Download CSV Reports
angular part:
$scope.downloadFiles = function() {
$http({
method: 'GET',
url: '/download/csv/files'
}).
success(function(data, status, headers, config) {
var anchor = angular.element('<a/>');
anchor.attr({
href: 'data:attachment' + encodeURI(data),
target: '_blank',
download: 'filename.zip'
})[0].click();
}).
error(function(data, status, headers, config) {
alertify.error(data);
});
};
NodeJS:
var path = require('path'),
fs = require('fs');
exports.downaloadAllCsv = function(req, res) {
var file = 'local path to my zip file',
filename = path.basename(file);
res.setHeader('Content-disposition', 'attachment; filename=' + filename);
res.setHeader('Content-type:',' application/zip');
var filestream = fs.createReadStream(file);
filestream.pipe(res);
};
I used an npm library called express-zip (found here: https://www.npmjs.com/package/express-zip)
Using Node 4.X and Express 4.X, I can download a zip file from my browser. Getting it to work through Angular is what lead me to my own question:
Client download of a server generated zip file
Given all of that, here is my server code that worked:
Node (4.X) code with express-zip:
router.get('/bulkdownload',function(req,resp){
var titles = req.query.titles || [];
if ( titles.length > 0 ){
utils.getFileLocations(titles).
then(function(files){
let filename = '/tmp/zipfile.zip';
// .zip sets Content-Type and Content-disposition
resp.zip(files,filename);
},
_errorCb)
}
});
The utils.getFileLocations(titles) returns a promise where files is an array like this:
[{path: '/path/to/file/file.abc',name:'file.abc'},{...},{...},...]
My .zip file is not corrupted, and is readable.
I'm new to angular js and I wish to open a PDF document in a new window of the browser after pressing a button.
I make a GET request with $http.get() at front end, at backend there is a Java rest service that respond to the GET and generates a PDF. I wish to open this PDF on the browser.
If is not possible to open the PDF in this way then at least open any PDF with AngularJs, how could I do this?
#GET
#Path("/printPdf")
public Response printService(){
//generates the pdf
File reportFile = new File(filePath);
String name = reportName + "." + "pdf";
ResponseBuilder response = Response.ok(new TemporaryFileInputStream(reportFile));
response.header("Content-Disposition", "attachment; filename=" + name);
response.header("Content-Type", "application/pdf");
response.header("Access-Control-Expose-Headers", "x-filename");
response.header("x-filename", name);
return response.build();
}
this is what there is at backend to generate the response in the rest service.
If you had something like this:
var myPdfUrl = 'something'
$http.get(myPdfUrl);
Do this instead:
var myPdfUrl = 'something'
$window.open(myPdfUrl);
If instead you have something like this:
$http
.get(generatePdfUrl)
.then(function(data){
//data is link to pdf
});
Do this:
$http
.get(generatePdfUrl)
.then(function(data){
//data is link to pdf
$window.open(data);
});
Maybe this can help,in the case of you have something like this :
$http.get('generatePdfUrl')
.then(function (data) { // data is your url
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
});
Then use your service in controller and do
$window.open(fileURL);