带有非拉丁字体的jsPDF [英] jsPDF with non-latin fonts
本文介绍了带有非拉丁字体的jsPDF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想从JavaScript创建pdf.为此，我使用 jsPDF
我想使用西里尔字体.
我根据文档中的建议创建了一个内容为Roboto-regular的js文件.
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.
然后我尝试使用西里尔字母字体获取pdf.但是很不幸.
这是我的代码.
And I try get pdf with cyrillic font. But unfortunately.
This is my code.
我必须如何使用包含内容字体的js文件?
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>
-->
推荐答案
使用类似于> ://sphilee.github.io/jsPDF-CustomFonts-support/ 或查看示例代码.
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>
这篇关于带有非拉丁字体的jsPDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
