javascript - 带有非拉丁字体的 jsPDF
问题描述
我想从 javascript 创建 pdf。为此,我使用jsPDF
我想使用西里尔字体。
我根据文档中的建议创建了包含字体 Roboto-regular 的 js 文件。
我尝试使用西里尔字体获取pdf。但不幸的是。
这是我的代码。
我必须如何使用包含字体的js文件?
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>
-->
解决方案
使用类似https://sphilee.github.io/jsPDF-CustomFonts-support/的工具 或查看示例代码。
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>
推荐阅读
- php - 不持久化数据的表单 Symfony 5
- python - ValueError:检查目标时出错:预期dense_16的形状为(1,)但得到的数组形状为(30,)
- android - 为什么根元素的布局属性没有膨胀?
- javascript - 显示与父元素具有相同类名的html子元素并隐藏其他元素
- java - JavaFX 形状没有出现?
- javascript - 如何使我的 javascript 代码永久化?
- python - 如何在 Python 中使用 For 循环创建列表?
- arrays - Python 3 - 用于比较的数组语法的误解,简单的问题
- php - 如何在 Woocommerce 操作中包含多个产品 ID
- python - 如何在 Django DetailView 中实现五星级评级?