I am building a web application (PWA) using Javascript. I want the application to automatically open downloaded files, such as PDF, DOCX, etc., in an external standard application such as Adobe Reader and Word.
Is there a function in Javascript that solves my problem?
At the moment, the application simply downloads the file to the device.
Unfortunately, I do not have much experience with Javascript, so I apologize if this is a stupid question.
XHR.responseType = 'blob';
XHR.onload = function() {
var data = this.response;
var a = document.createElement('a');
a.href = window.URL.createObjectURL(data);
a.download = fileName;
a.dispatchEvent(new MouseEvent('click'));
};
Related
I have looked at a few posts on here about pdfkit and embedding fonts but most seem to use the node version or ruby / something that looks vastly different than what I am doing.
I have everything but the fonts working as expected. However when I enable a custom font no text appears. I see placeholders and bullet points for lists but other than that, nothing.
<html>
<head>
<script src="https://github.com/foliojs/pdfkit/releases/download/v0.11.0/pdfkit.standalone.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
<script type="text/javascript">
//getting the arraybuffer of the font I need
var xhr = new XMLHttpRequest;
xhr.onload = function() {
console.log("Font IS 1",xhr.response)
};
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);
xhr.send();
//wix method that starts when a UI element is called. In this case a "download" button
window.onmessage = (event) => {
if (event.data) {
// create a document and pipe to a blob
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
doc.font(xhr.response)
//The standard way of setting a font for embedded
//doc.font('Helvetica')
doc.fontSize(20)
doc.text('Стартовая Страница',200,120)
doc.text('Test',200,220)
doc.list(['Стартовая Страница'],50,50)
doc.list(['TestList'],50,400)
// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function() {
const blob = stream.toBlob('application/pdf')
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = "ShoppingList";
a.style.position = 'fixed';
a.target = '_blank';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});
});
};
</script>
</head>
<body>
</body>
</html>
I have tried several different methods but most help seems to be suggesting CSS which I don't see how I can use here. Unfortunately I am unable to upload a font to my own filesystem to use as the site where I am building it blocks upload of fonts for some reason. This is why I went with the google fonts as I didn't run into CORS issues.
I directly linked to the woff2 file as getting an arraybuffer using any of the other methods google recommends doesn't seem to work. As a note I will be using both Latin and Cyrillic characters so this might be an issue since they are separate character sets it appears
Here is where I was getting the links from
https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap
Also when I try opening the pdf I get this error
Cannot extract the embedded font 'BZZZZZ+CormorantGaramond-Regular'. Some characters may not display or print correctly
When I look at the registered fonts in the pdf it appears to show how it shows for other fonts
Is there some other way I should be trying to register this font to the document?
It seems that you can't directly embed any of the "woff2" files served by google fonts. You have to find the otf or ttf files that are available in the github repo.
You can find the files you need here: https://github.com/CatharsisFonts/Cormorant/tree/master/1.%20TrueType%20Font%20Files
Just download a file and then copy and paste the download link. So:
xhr.open('GET', 'https://fonts.gstatic.com/s/cormorantgaramond/v9/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2', true);
should be:
xhr.open('GET', 'https://raw.githubusercontent.com/CatharsisFonts/Cormorant/master/1.%20TrueType%20Font%20Files/Cormorant-Regular.ttf', true);
I am trying to download a file with JavaScript and not let it open in a new tab or window.
What I have so far is this:
var link = document.createElement("a");
link.download = filename;
link.href = fileurl;
link.click();
I've been doing a fair bit of research about this but cannot find anything that works because the file is coming from a Google Signed URL which I have no control over and cannot modify headers for.
This has to happen in client side JavaScript/jQuery.
Edit
It is actually dynamic so there can be X number of files, if I could get them all to download as a zip that would be even better.
for(var i=0; i<filenames.length; i++){
var formData = new FormData();
formData.append('filename', filenames[i]);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
fileurl = this.responseText;
var link = document.createElement("a");
link.download = filenames[i];
link.href = fileurl;
link.click();
}
}
xmlhttp.open("POST", "url_to_get_download_urls");
xmlhttp.send(formData);
}
Have you tried doing the download action in different browsers? In the latest versions of Chrome, you cannot download cross-origin files (they have to be hosted on the same domain).
As well if the file doesn't change, have you tried hosting the file yourself and initiating the download?
edit: If you're trying to bundle the items into a zip for download, that would necessitate doing the initial download on your own server and zipping there.
I'm trying to create a web application for videos, I decided to start by configuring the videos, in case of problem, creating blob url for videos.
It turns out that I'm not sure what terms to use to search in google and the ones I used do not find anything very simple or straightforward.
I would like to know how I can create a blob url for videos and what would be the best way, since I have already seen topics using FileReader and MediaSource and some others, so I would like to know the simplest way to do this.
I'm testing on a direct html, without external libraries or external files.
var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["http://localhost/assets/mp4/video.mp4"],{"type" : "video\/mp4"});
var value = URL.createObjectURL(file);
$(document).ready(function(){
$('#MyVideo').attr('src',value);
});
Generates a blob link but does not load the video
Edit:
For further questions from beginners like me, I got the expected result with the script below:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/assets/mp4/video.mp4');
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var blob = new Blob(([xhr.response]));
var url = URL.createObjectURL(blob);
document.getElementById('_video').src = url;
};
I'm developing a cross platform app using cordova. I use intel XDK as a simulator. I want to download a pdf file from webservice and open it once it gets downloaded.
I have used the following code
var xhr = new XMLHttpRequest();
xhr.open("GET", mapusaurl);
xhr.setRequestHeader('Authorization',auth);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
if (this.status === 200) {
var blob = new Blob([xhr.response], {type: "application/pdf"});
var objectUrl = URL.createObjectURL(blob);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="mapusa" + new Date() + ".pdf";
link.click();
window.open(link.download);
}
};
xhr.send();
As far as Chrome is concerned it downloads the pdf and then I can open it. For intel XDK when I open the respective page a dilaog pops up where I'm asked the location to save the file and at the same time I get the following error
Cannot GET /mapusaThu%20Jan%2018%202018%2012:05:40%20GMT+0530%20(India%20Standard%20Time).pdf
That's probably because it's trying to open the pdf before it has downloaded (it shows up even before I click the save button)
Is there a way to get around this? Thanks in advance
I have a web application for downloading files. Everything works fine except when I want to download a file more than 1GB .
This is my java code:
InputStream in = new FileInputStream(new File(folderFile.getAbsolutePath()));
org.apache.commons.io.IOUtils.copy(in, response.getOutputStream());
response.flushBuffer();
in.close();
HTTP request :
$http({
method:'get',
url:this.apiDownloadFileUrl,
responseType:'arraybuffer',
cache: false
});
and here is client side: I got data successfully on client, but when I make it Blob , if the data size was more than 500MB , nothing happened and it wasn't downloaded. Also, I can download 300MB ...
How can I check if it is a memory problem, or a server problem? ... When I download from gmail , I can download more than 1GB .
.success(function(databack) {
var file = new Blob([ databack ], {
type : 'application/csv'
});
var fileURL = window.URL.createObjectURL(file);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = data;
document.body.appendChild(a);
a.click();
Have you tried using the copyLarge() methods from IOUtils? For the copy() methods the JavaDoc says:
"For large streams use the copyLarge(InputStream, OutputStream) method."
You should check the response message first, and decide which side fire the problem.
As my experience, you should check whether the file was cached by the browser rather than any problems~