I am still new to Syncfusion. Currenly I've done a table with a script (document.ready) function to merge the table cells with similar values. The table have been displayed on Google Chrome successfully with my localhost and the columns of the table containing similar values have been merged successfully as well. A function of generating the webpage to PDF works successfully, but the columns of the table displayed on the PDF file do not merge, so I assume that the script file is not rendered in my PDF function.
This is my PDF Function:
private void printpdf()
{
//printpdf
//Initialize HTML to PDF converter
HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
WebKitConverterSettings settings = new WebKitConverterSettings();
//Set WebKit path
settings.WebKitPath = Server.MapPath("~/QtBinaries");
settings.EnableJavaScript = true;
settings.AdditionalDelay = 5000;
//Assign WebKit settings to HTML converter
htmlConverter.ConverterSettings = settings;
//Get the current URL
string url = HttpContext.Current.Request.Url.AbsoluteUri;
//Convert URL to PDF
Syncfusion.Pdf.PdfDocument document = htmlConverter.Convert(url);
//Save the document
document.Save("Output.pdf", HttpContext.Current.Response, HttpReadType.Save);
}
This is my Script Function on aspx file:
$(document).ready(function () {
-
-
-
};
The webKit rendering engine will preserve the PDF document like how the input HTML file displayed on WebKit (example, safari) based web browsers. So, kindly ensure the preservation of your webpage on WebKit based browser. If it is not possible, kindly share with us the complete HTML file (save the webpage from a web browser and share the complete HTML file with styles, scripts, etc.,) to us. So, that it will be helpful for us to analyze and assist you further on this.
If your web page is rendering properly in the chrome browser, kindly try our latest Blink rendering engine for the conversion. It will preserve the output PDF document like how the input HTML is displayed on chromium-based browsers. Please refer below link for more information,
https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink
https://www.syncfusion.com/kb/10258/how-to-convert-html-to-pdf-in-azure-using-blink
I'm using jsPDF (https://parall.ax/products/jspdf, https://github.com/MrRio/jsPDF) to produce dynamic PDFs in a web application.
It works well, but I'd like to figure out whether it's possible to use Google web fonts in the resulting PDF.
I've found a variety of links that are related to this question (including other questions on SO), but most are out of date, and nothing looks definitive, so I'm hoping someone clarify whether/how this would work.
Here's what I've tried so far, with no success:
First, load the font, and cache it as a base64-encoded string:
var arimoBase64;
var request = new XMLHttpRequest()
request.open('GET', './fonts/Arimo-Regular.ttf');
request.responseType = 'blob';
request.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
arimoBase64 = this.result.split(',')[1];
}
reader.readAsDataURL(this.response);
};
request.send()
Next, create the pdf doc:
doc = new jsPDF({
orientation: "landscape",
unit: "pt",
format: "letter"
});
doc.addFileToVFS("Arimo-Regular.ttf", arimoBase64);
doc.addFont("Arimo-Regular.ttf", "Arimo Regular", "normal");
doc.setFont("Arimo Regular", "normal");
doc.text("Hello, World!", 100, 100);
doc.save("customFontTest");
When the PDF is saved - if I view it in my browser - I can see the custom font. However - if I view it using Adobe Reader or the Mac Preview app - the fonts are not visible.
I assume that's because the font is rendered in the browser using the browser's font cache, but the font is not actually embedded in the PDF, which is why it's not visible using Adobe Reader.
So - is there a way to accomplish what I'm trying to do?
OK - I finally figured it out, and have gotten it to work. In case this is useful for anyone else - here is the solution I'm using...
First - you need two libraries:
jsPDF: https://github.com/MrRio/jsPDF
jsPDF-CustomFonts-support: https://github.com/sphilee/jsPDF-CustomFonts-support
Next - the second library requires that you provide it with at least one custom font in a file named default_vfs.js.
That file should look like this:
(function (jsPDFAPI) {
"use strict";
jsPDFAPI.addFileToVFS("[Your font's name]","[Base64-encoded string of your font]");
})(jsPDF.API);
I'm using two custom fonts - Arimo-Regular.ttf and Arimo-Bold.ttf - both from Google Fonts. So, my default_vfs.js file looks like this:
(function (jsPDFAPI) {
"use strict";
jsPDFAPI.addFileToVFS("Arimo-Regular.ttf","[Base64-encoded string of your font]");
jsPDFAPI.addFileToVFS("Arimo-Bold.ttf","[Base64-encoded string of your font]");
})(jsPDF.API);
There's a bunch of ways to get the Base64-encoded string for your font, but I used this: https://www.giftofspeed.com/base64-encoder/.
It lets you upload a font .ttf file, and it'll give you the Base64 string that you can paste into default_vfs.js.
You can see what the actual file looks like, with my fonts, here: https://cdn.rawgit.com/stuehler/jsPDF-CustomFonts-support/master/dist/default_vfs.js
So, once your fonts are stored in that file, your HTML should look like this:
<script src="js/jspdf.min.js"></script>
<script src="js/jspdf.customfonts.min.js"></script>
<script src="js/default_vfs.js"></script>
Finally, your JavaScript code looks something like this:
const doc = new jsPDF({
unit: 'pt'
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
This is probably obvious to most, but in that addFont() method, the three parameters are:
The font's name you used in the addFileToVFS() function in the default_vfs.js file
The font's name you use in the setFont() function in your JavaScript
The font's style you use in the setFontType() function in your JavaScript
You can see this working here: https://codepen.io/stuehler/pen/pZMdKo
Hope this works as well for you as it did for me.
I recently ran into this same issue, but it looks like the jsPDF-CustomFonts-support repo was rolled into MrRio's jsPDF repository, so you no longer need it to get this working.
I happen to be using it in a React App and did the following:
npm install jspdf
Create a new file fonts/index.js (Note: You can download the Google Font as a .ttf and turn it into the Base64 encoded string using the tool in mattstuehler's answer)
export const PlexFont = "[BASE64 Encoded String here]";
Import that file where you need it:
import jsPDF from 'jspdf';
import { PlexFont } from '../fonts';
// Other Reacty things...
exportPDF = () => {
const doc = new jsPDF();
doc.addFileToVFS('IBMPlexSans-Bold.ttf', PlexBold);
doc.addFont('IBMPlexSans-Bold.ttf', 'PlexBold', 'normal')
doc.setFont('PlexBold');
doc.text("Some Text with Google Fonts", 0, 0);
// Save PDF...
}
// ...
Just wanted to add an updated answer - for version 1.5.3:
Convert the font file to base64 = https://www.giftofspeed.com/base64-encoder/
const yanone = "AAWW...DSES"; // base64 string
doc.addFileToVFS('YanoneKaffeesatz-Medium.ttf', yanone);
doc.addFont('YanoneKaffeesatz-Medium.ttf', 'YanoneKaffeesatz', 'normal');
doc.setFont('YanoneKaffeesatz');
I am creating HTML5 type of application in Titanium Appcelerator. I have written code in order to creates text file using using titanium code which executes properly and create text file at /Users/demoUser/Library/Developer/CoreSimulator/Devices/FE1CF0AC-D5BD-4FAB-9615-C58D80B5A9C6/data/Containers/Data/Application/40686DB0-BFB0-4D01-98BB-9E5758C4976D/Documents/file.txt
Now I am having a html file i.e index.html which I am loading in titanium webview within same application. Now I want to access content of file.txt in a function created in .html file.
Anyone who has worked on anything like this before ? Or any help or suggestion regarding this would be appreciated.
You can read a file either from resources directory or application directory and render it in html page like below.
var readContents;
var readFile = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'data.txt');
if (readFile.exists()) {
readContents = readFile.read();
Ti.API.info('File Exists');
}
var docString = readContents.toString();
Ti.API.info('Contents = ' + docString);
var text_in_html = "<html><body><pre>" + docString + "</pre></body></html>";
// Create our Webview
var myWV = Ti.UI.createWebView({
html:text_in_html,
title:'Title goes here',
left:0,
right:0,
top:0,
bottom:0,
loading: true
});
I am trying to do barcode reading in HTML5/ Javascript on mobile so I can extract the barcode and post to a Ruby on Rails web service.
I am using this code for barcode reading: code by manuels which works fine (You can try out the barcode reader code here) if camera on mobile is set to a very low resolution, not at high resolution though. This method using HTML Media Capture is not ideal as user would have to switch to low resolution manually. I know one can set resolution using GetUserMedia but it's not compatible with many browser/ versions.
I am trying to resize the captured photo using a canvas, based on the canvas code here (not written by myself). The resize works as expect. I then combine the barcode reading code mentioned above in the resize function as below but the barcode reading part doesn't work.
... var interface = new Interface('./bardecode-worker.js');
interface.on_stdout = function(x) { document.getElementById('barcode').appendChild(document.createTextNode('result:
'+x)); }; ...
interface.addData(tempCanvas.toDataURL('image/jpeg'), '/barcode.jpg').then
(
function()
{
interface.run('/barcode.jpg').then
(
function() { console.log(arguments); }
);
}
)
This is manuels' original code below, and in the above code, I am trying to feed the resized image from the canvas into the interface.js instead of a FileReader:
document.getElementById('barcode_file').onchange = function(e) {
var file = e.target.files[0];
var reader = new FileReader();
document.getElementById('barcode').appendChild(document.createTextNode('running...'));
reader.onload = function(ev) {
interface.addData(ev.target.result, '/barcode.jpg').then(function() {
interface.run('/barcode.jpg').then(function() { console.log(arguments); });
})
};
reader.readAsBinaryString(file);
};
Sorry, I am quite new to javascript. Any suggestions? Or is there a better solution?
You might be interested in looking at this program which specializes in providing easier access to hardware on mobile phones.
http://bridgeit.mobi/
It installs a native app on the phone and then lets you open the app from your webpage and then passes back the scan or photo or other item.
They use a javascript library they wrote to open the app and then pass the information back to your webpage.
The library will also open the store page of the program if it is not installed the first time it a user tries to use it.
I'm not particularly using Flex but I am using javascript and html and css in a adobe air application. I would like to be able to unzip and zip files. I've looked at a few libraries but none worked as I needed it to. I read somewhere that I could use Fzip library but I need to do this in javascript most preferably but the files are actionscript files. Any advice? Thanks.
You can use almost any actionscript library with html/javascript air app. Example:
Download swc file for airxzip: http://code.google.com/p/airxzip/downloads/list
Rename swc to zip and unzip it
Rename included library.swf to coltware_airxzip.swf
Include the library on your page like this:
<script src="coltware_airxzip.swf" type="application/x-shockwave-flash"></script>
This reads a zip file and writes contents to output folder on the desktop (given you have included jQuery and the AIRAliases.js file from the SDK):
var input = new air.File();
input.addEventListener(air.Event.SELECT, function(event) {
var outputDirectory = air.File.desktopDirectory.resolvePath('output');
var reader = new window.runtime.com.coltware.airxzip.ZipFileReader();
reader.open(event.currentTarget);
$.each(reader.getEntries(), function(i, entry) {
if (!entry.isDirectory()) {
var stream = new air.FileStream();
stream.open(outputDirectory.resolvePath(entry.getFilename()), air.FileMode.WRITE);
stream.writeBytes(reader.unzip(entry));
stream.close();
}
});
});
input.browseForOpen('Select a zip file...', [new air.FileFilter('Zip files', '*.zip')]);
I wrote a sample app for Adobe Air + FZip using javascript.
Figured I'd share that here in case anyone else arrives here via Google.
Can never have too many working examples right?
Example -> http://www.drybydesign.com/?p=233