I want to create pdf from javascript. For this I use jsPDF
I want to use cyrillic fonts.
I create js-file that contents font Roboto-regular by recommendations in docs.
And I try get pdf with cyrillic font. But unfortunately.
This is my code.
How I must use js-file that contents font?
function doPdf() {
var pdf = new jsPDF('l', 'pt', 'letter');
pdf.setFont('Roboto-Regular', 'normal');
pdf.html(document.body, {
callback: function(pdf) {
var iframe = document.createElement('iframe');
iframe.setAttribute(
'style',
'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px'
);
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring');
}
});
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<button onclick="doPdf();">doPdf</button>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<!-- js-file with font
<script src="./Roboto-Regular-normal.js"></script>
-->
Use tools similar https://sphilee.github.io/jsPDF-CustomFonts-support/
or see example code.
window.loadedFile;
window.loadedFileContents;
var opts = {
on: {
load: function(e, file) {
window.loadedFile = file;
document.getElementById('fontName').value = file.extra.nameNoExtension;
var fileReader = new FileReader();
fileReader.onload = function(e) {
window.loadedFileContents = e.target.result;
window.loadedFileContents = window.loadedFileContents.substr(
window.loadedFileContents.indexOf('base64,') + 7
);
};
fileReader.readAsDataURL(file);
}
}
};
FileReaderJS.setupInput(document.getElementById('file-input'), opts);
var createFile = document.getElementById('createFile');
createFile.addEventListener('click', generateJsPDFFontFile, false);
function generateJsPDFFontFile() {
var jsFile = '';
var fontName = document.getElementById('fontName').value;
var fontStyle = document.getElementById('fontStyle').value;
var createdFileName = fontName + '-' + fontStyle + '.ttf';
var font = window.loadedFileContents;
var doc = new jsPDF();
doc.addFileToVFS(createdFileName, font);
doc.addFont(createdFileName, fontName, fontStyle);
doc.setFont(fontName);
doc.text(15, 15, document.querySelector('[name="content"]').value || 'Привет, Мир!');
doc.save('test.pdf');
}
<script src="http://bgrins.github.io/filereader.js/filereader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<form id="file-form" method="post" class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="fontName">fontName</label>
<input type="text" name="fontName" id="fontName" placeholder="fontName" />
</div>
<div class="pure-control-group">
<label for="fontStyle">fontStyle</label>
<select name="fontStyle" id="fontStyle">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="italic">italic</option>
<option value="bolditalic">bolditalic</option>
</select>
</div>
<div class="pure-control-group">
<label for="name">File</label>
<input type="hidden" name="extra-data" multiple />
<input type="file" id="file-input" name="file-input" multiple />
</div>
<div class="pure-control-group">
<label for="content">Content</label>
<input type="text" name="content">
</div>
<div class="pure-controls">
<button value="Create" id="createFile" class="pure-button pure-button-primary">
Create
</button>
</div>
</fieldset>
</form>