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);
Related
I have this QR code generator that I pieced together from tutorials across the web. You can see it here. It replaces an image src in a div with the QR code generated from Google API based on input from the user, so doing doesn't work, as the link is dynamic. Is there a way to download the image from a button?
I didn't know what part of the code to attach to make it clear, so if you want to see the entire code, visit the GitHub repository: https://github.com/troop129/tarbiya/blob/main/index.html
Thanks for your help!
Not only it is possible to 'download the image from a button', but you can also download the image immediately after the API responds and then display it from a local URL.
const url = 'https://picsum.photos/200/300';
const target = document.getElementById('target');
const link = document.getElementById('download');
const xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', (e) => {
const blobUrl = URL.createObjectURL(e.target.response);
target.src = blobUrl;
link.href = blobUrl;
link.download = 'image.jpg';
});
xhr.responseType = 'blob';
xhr.open('GET', url);
xhr.send();
<img id='target'></img>
<a id='download'>Download</a>
I'd like to know if there is any way so that I can display a multi-paged tif image in browser using client-side coding (not server-side) in a way that user can navigate between the pages like common jquery photo libraries. I found Tiff.js from https://github.com/seikichi/tiff.js, but this library only gives download link of multi-paged tiff and do not display it in html.
I can do it in server-side using libraries like ImageMagic, LibTiff.Net etc but don't want to because the number of photos are huge and if I do that it consume the large amount of server's cpu
do you know any alternative solution??
I had this problem too and converting the images was not an option for us.
You can use tiff.js that you linked to, have a look at the demo and then view source at http://seikichi.github.io/tiff.js/multipage.html.
$(function () {
Tiff.initialize({TOTAL_MEMORY: 16777216 * 10});
var xhr = new XMLHttpRequest();
xhr.open('GET', 'images/multipage.tiff');
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var buffer = xhr.response;
var tiff = new Tiff({buffer: buffer});
for (var i = 0, len = tiff.countDirectory(); i < len; ++i) {
tiff.setDirectory(i);
var canvas = tiff.toCanvas();
$('body').append(canvas);
}
};
xhr.send();
});
Replace 'images/multipage.tiff' with the path to your file and it will add each page to the body element (just replace $('body') with your element if you want it somewhere else). Works with single tiff as well.
Browsers won't support tif images.
check this Wiki Link.
You have to generate a png image and store it and show that in browser for the tif.
In my web application I have supported user to upload any type of document (.png, .jpg, .docx, .xls, ... ) I'm trying to implement download functionality for these documents.
In Google Chrome if you click on Download link Save dialog is shown for all above documents.
In Mozilla Firefox for docx and xls works fine, Save dialog is shown but for .png and .jpg download tag is not working as expected i.e., download dialog or Save dialog does not appear, it directly open that image.
My code:
Download
I have tried almost all solutions mentioned on stackoverflow and suggested by Google. But most of them says that 'check firefox version' and other changes like:
try adding the element to the DOM before triggering the click
Remove filename from download tag it is of boolean type and etc.
I have also tried w3schools lesson on anchor tag and download attribute but nothing seems to be working.
My Mozilla Firefox version is: 38.0.5
P.S.: in chrome as well as in firefox .docs, .xls, .pdf documents work fine, problem is for .png and .jpg in firefox.
Firefox will handle png and jpeg using default handling, which is to inline them in the document. When clicking a link, even if download attribute is defined, seem to make Firefox think it has a new image ignoring the download aspect of it. This may be a temporary bug.
Here is a way, admittedly not super-elegant, to get around this problem forcing the image to be interpreted as an octet-stream.
It does not work inline on Stackoverflow so you have to test it on jsFiddle.
The code does the following:
Scans the document for a-tags.
Those which has data-link set will have a common click-handler attached.
When clicked the link is extracted from the data-link attribute (href is se to #), loaded as an ArrayBuffer via XHR (CORS requirements applies, not a problem in this case), and is converted to an Object-URL with the Blob set to mime-type octet/stream
The Object URL is set as window.location to redirect to this binary data which will make the browser ask user to download the file instead.
var links = document.querySelectorAll("a"), i = 0, lnk;
while(lnk = links[i++]) {
if (lnk.dataset.link.length) lnk.onclick = toBlob;
}
function toBlob(e) {
e.preventDefault();
var lnk = this, xhr = new XMLHttpRequest();
xhr.open("GET", lnk.dataset.link);
xhr.responseType = "blob";
xhr.overrideMimeType("octet/stream");
xhr.onload = function() {
if (xhr.status === 200) {
window.location = (URL || webkitURL).createObjectURL(xhr.response);
}
};
xhr.send();
}
Example tag:
Click to download
The drawback is that you'll loose the extension in the filename.
This is also possible to do using a Data-URL, but a data-url has a 166% overhead compared to using ArrayBuffer and a blob.
I had a similar problem with firefox not handling the download attribute, even for same-domain files.
My target files are actually hosted on AWS, so they are cross-domain. I got around this with a same-domain endpoint that downloads the remote file and pipes it to the client.
const express = require('express')
const {createWriteStream} = require('fs')
const downloadVideo = (url) => { return new Promise((resolve, reject) => {
const filePath = `/tmp/neat.mp4`
const ws = createWriteStream(filePath)
request(url, {}, (error, response, body) => {
if(error) { return reject(error) }
resolve(filePath)
}).pipe(ws)
})}
app.get('/api/download', async (req, res) => {
const videoPath = await downloadVideo(req.query.url)
res.sendFile(videoPath)
})
On the client, I send the file path to the download endpoint to get a blob back, which is then converted to an object url. From there, it's standard download attribute stuff.
async download(remoteFilePath){
const a = document.createElement('a')
const dlURL = `/api/download?url=${encodeURIComponent(remoteFilePath)}`
const blob = await fetch(dlURL).then(res => res.blob())
a.href = URL.createObjectURL(blob)
a.setAttribute('download', 'cool.mp4')
document.body.appendChild(a)
a.click()
a.remove()
}
As you are using HTML5 attribute, each browser handling differently. So use https://github.com/dcneiner/Downloadify for client side forceful download instead of viewing in browser.
I'm developing a Chrome extension that will save files to the downloads folder (that's not all it's doing, but that's the part I have trouble with). Right now I'm focusing on PDF files. Basically, when a PDF is opened in Chrome, the user can manually save it using Menu -> Save File As ..., I'm just trying to automate this functionality using the extension, but I haven't found a good way to do it.
Let's say I can detect if the current tab has a PDF file in it (based on answers from this question).
The best thing I have figured out so far is to initiate a download:
chrome.downloads.download({
url: tabs[0].url, saveAs: false,
filename: "my file", /* This will be some unique autogenerated identifier */
conflictAction: "overwrite"
});
This works but has 2 drawbacks:
The file has to be re-downloaded, which is a pain if it's large. Besides, the file has been downloaded already so I should be able to use it.
For some reason this doesn't work with files opened locally ("file://..."). It throws a NETWORK_INVALID_REQUEST and doesn't download.
Is there a better way to save the file?
Note, chromium / chrome browsers appear to append embed element to document.body to display .pdf files
a) detecting pdf utilizing window.location.href , document.querySelectorAll("embed")[0].type;
b) utilizing XMLHttpRequest to request existing document, which should return pdf document as blob response, from cache; see console -> Network -> Headers -> Status Code
To allow opening file: protocol at chromium / chrome browsers, try utilizing command line flag --allow-access-from-files; see How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?
At .pdf document , i.e.g; Ecma-262.pdf try
// check if `document` is `pdf`
if (/pdf/i.test(window.location.href.slice(-3))
|| document.querySelectorAll("embed")[0].type === "application/pdf") {
var xhr = new XMLHttpRequest();
// load `document` from `cache`
xhr.open("GET", "", true);
xhr.responseType = "blob";
xhr.onload = function (e) {
if (this.status === 200) {
// `blob` response
console.log(this.response);
var file = window.URL.createObjectURL(this.response);
var a = document.createElement("a");
a.href = file;
a.download = this.response.name
|| document.querySelectorAll("embed")[0].src
.split("/").pop();
document.body.appendChild(a);
a.click();
// remove `a` following `Save As` dialog,
// `window` regains `focus`
window.onfocus = function () {
Array.prototype.forEach.call(document.querySelectorAll("a")
, function (el) {
document.body.removeChild(el)
})
}
};
};
xhr.send();
};
Addressing only the file:// aspect of your problem. Does your extension have permission to access file://. In order to have access your extension both needs to ask for file:/// and user has to manually grant this access from the extensions page. You can check if you have the requisite permission using https://developer.chrome.com/extensions/extension#method-isAllowedFileSchemeAccess.
See Adding file://. permission to chrome extension for more information about accessing file:// urls. You may also find How can I enable my chrome extension in incognito mode? helpful.
For a related discussion (although not specific for your use case since you already have a PDF file), also see https://code.google.com/p/chromium/issues/detail?id=169337.
In Chrome packaged apps you can use to load external pages inside the app. Is there a way to make them load a local file (an html file inside the packaged app)? I can't use iframe, because iframe wont support external resources (scripts, images, whatever).
Don't have any code to show, but try this: Assuming you can read the local file (must use chrome.fileSystem.chooseEntry or have a retained entry on the file or its containing directory) and get a FileEntry object, you can then create a FileReader to get the file as a data URL. Then you can use that data URL directly in a webview. (Must have webview permission, in addition to the permissions needed to access the FileEntry.)
[Above is from memory while I'm eating breakfast. Might have some API names slightly off, but I hope you get the general idea.]
The local-resources sample has an example of loading an html file in a webview. You need to specify the files in the webview.partitions section of manifest.json.
You may try loading the file as a Blob via an XMLHttpRequest, then creating an object url to set it as webview's src attribute:
window.onload = function() {
var wv = document.getElementById("wv");
var xhr = new XMLHttpRequest();
xhr.open('GET', 'local_file.html', true);
xhr.responseType = 'blob';
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var blob = new Blob([this.response], {type: 'text/html'});
wv.src = window.URL.createObjectURL(blob);
}
};
xhr.send();
};
Here's a working example: chrome_app_webview_test.
Not exactly sure what you are looking for, but I have successfully used a <webview> tag pointing to a local .html file (including image and video resources) within the directory structure of an UNpackaged Chrome App. As its URL I simply use window.location.origin +'/files/my.html'. I leave my App unpackaged so I can dynamically generate the .html files. I guess you can pack the app if the content is static, but I have not tried.