I hava a backbonejs view containing a button saying "download pdf". I also have the url available where the pdf can be found. I want that when user clicks on the button, the pdf file gets downloaded. Is it possible?
EDIT: My view code in backbone.js
savendownload: function () {
this.$("#saveanddownload").button('loading');
var that = this;
var formData = this.fetchData();
if (formData) window.invoices.create({
buyer: formData.buyer,
items: formData.items,
company: formData.company,
action: "savendownload"
}, {
wait: true,
success: function (model) {
var data = model.toJSON();
var filename = data.filename;
//download code here
}
});
}
Don't use a button, use a link and set the href attribute to the URL of your PDF file. The browser will handle the file download for you, honoring the user's browser preferences.
<a href="your/file.pdf" />
If you need the link to look like a button, you can style it using CSS. See for example this SO thread.
Edit: AFAIK, you can't reliably initialize a file download from javascript. What you can do is to open a new window/tab with your pdf URL:
window.open("http://domain.com/document.pdf",'_blank');
But the user's browser can block the new window from being created. You might want to simply generate a download link:
$('<a>Click here to download PDF</a>').attr('href', filename).appendTo(that.$el);
And have the user click the link to initiate the file download.
use the "download" tag
<a href="assets/pdfs/yourdocument.pdf" download>Download PDF</a>
but does not wok at IE Explorer ;)
Related
I have a button on my page that opens the page in the default browser:
<button type="button" title="view full size in browser" onclick="NewTab()">
view in browser
</button>
<script>
function NewTab() {
window.open(
"https://mypage.aspx", "_blank");
}
</script>
The button should only be displayed if the page is not yet shown in a browser, for example if it is shown embedded in a Microsoft Teams page as a website tab.
How can I detect if the page is displayed in a browser and then remove the button?
There is no inbuilt function in teams. You have to manage this code manually.
If you use static tab/Configurable tab you need to add one parameter in manifest json content URL section like below:
"contentUrl": "<<your base url>>/Demo/?inTeams=true"
Add the below code in view file to detect if parameter is true it is inside the teams If false it is outside in teams.
const url = new URL(window.location);
const params = new URLSearchParams(url.search);
if (params.get("inTeams")) {
alert("inside teams");
} else {
alert("inside browser");
}
In a VueJS 1 site, I create download links for files like this:
<a download={{d.fileName}}
href="#null"
v-on:click="getFile(d.guid);"
target="_blank">
{{d.fileName}}</a>
The download function is as below, and I can see from the network that the file data is received from the server when I click on the link.
The file object contains the file data, but I don't see how I can assign the content of the file object to what is downloaded in the browser.
When you click on the link, a file is downloaded with the correct name, but it contains HTML from my site instead of the file data.
download: function() {
var that = this;
AXIOS('GET', '/file/' + guid).then(function (response) {
that.file = response.data;
});
return that.file;
}
How can I get the file data to be downloaded?
The file URL should be in in the link's href attribute.
Now the href points to the page it is already on (http://yoursite.com/yourpage#null) so it will download the HTML from the current page instead of the file.
The resulting HTML of the link should look like this:
<a href="http://yoursite.com/file/yourfile.ext"
download="yourfile.ext"
target="_blank">yourfile.ext</a>
The code below contains a hyperlink that causes a spring-generated pdf from the server to be loaded in a new browser window when a user clicks on the link. The problem is that some users have pop-ups blocked in their browsers. What specific changes need to be made to the code below in order for the pdf to open IN THE SAME BROWSER WINDOW when a user clicks on the link? Note that this pdf is generated by a spring controller.
Here is the html:
<p><a ng-click="getPdf()">Show PDF</a></p>
And here is the Angular controller code:
angular.module('message', ['auth']).controller('message', function($scope, $http, $sce, auth) {
$scope.authenticated = function() {
return auth.authenticated;
}
$scope.getPdf = function(){
$http.get('/api/some-pdfr', {responseType: 'arraybuffer'})
.success(function (data) {
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
});
}
});
window.open supports a second parameter, windowName. You can set this to "_self" to open the URL in the same window.
window.open(fileURL, "_self");
See here for more information.
A better way might be to make the directive update the links href to the correct url before it navigates. That would let you use _blank as the target and open it in a new tab/window.
Instead of calling window.open, you need to provide the user with a link to click on whose href is fileUrl. You can either do this by generating the PDF before the user clicks on the link, or by providing them with a separate link after the PDF has been generated.
I am working on a JS program which should open a webpage www.mysite.com & click on a link inside that webpage to download a pdf.
The link to click looks like this:
<a onclick="download();return false;" href="#noWhere">Click to Download</a>
Ordinarily, manually clicking the link, calls the following function to download the pdf:
function download() {
document.forms[0].action = path + "/xxW04_sv_0140Action.do";
document.forms[0].target = "_self";
document.forms[0].submit();
}
My code is simplified javascript code to open the page & click on the "Click to Download" button is this:
<script>
var linkname = "http://www.mysite.com";
var windowname = "window_1"
// Opens a new window
var myWindow = window.open(linkname, windowname ,"width=400,height=600");
//should open a link to download pdf
myWindow.document.getElementById('href = \"#noWhere\"').click();
</script>
So far I can open the webpage "mysite.com" in a seperate window using but for some reason no button clicking is happening and certainly no pdf is downloaded.
Of course if I manually click the "Click to Download" button it downloads.
Can anyone tell me what i'm doing wrong? Why I cannot simulate a click with the above js code?
Or possibly give me some things to try. Any help much appreciated and Than you.
UPDATE:
From the initial answers below, possibly this method is doomed for failure! Can anyone suggest a better way I could be downloading these pdfs?
You'd better use:
<a href="http://www.mysite.com/mypdf.pdf">
This should download that pdf file.
It won't work. The same-origin policy will prevent you from accessing the content of any pages loaded from another domain.
Also, as #kamilkp pointed out, you have to provide the getElementById() function with an id value. You can't just plug any old stuff in there and expect it to work.
Another problem is your reliance on clicks for this to work. What about users that use the tab key to select links and then press Enter to follow the link?
A link that contains a .pdf such as the following opens in a new tab:
<a target="_blank" href="http://somePDF.pdf">Download</a>
Is it possible to make a Powerpoint file, .ppt, open in a new browser tab instead of making the user download the file?
I have tried this the following but this makes a user download the file:
<a target="_blank" href="http://somePPT.ppt">Download</a>
I am not sure if this is possible and have not been able to find any information on it so I am posting here.
If the user's browser isn't able to display the file and has no plugin that can display the file, it will offer the file as a download.
If you can export the PowerPoint slides to PDF or HTML, they are more likely to be displayed in the browser.
you could check if the browser has installed an pdf plugin, and if not use pdf.js to convert your pdf into an html page.
could look like this:
function hasPDFPlugin() {
for(var i = 0; i < navigator.plugins.length; i++) {
if(navigator.plugins[i].name.toLowerCase().indexOf('pdf') >== 0) {
return true;
}
}
return false;
}
if(!hasPDFPlugin()) {
// do the pdf.js stuff
}
with the help of google docs it can viewable.add file location after url=
https://docs.google.com/viewerng/viewer?url=
ex-https://docs.google.com/viewerng/viewer?url=http://example.in/filename.ppt