带有非拉丁字体的jsPDF
[英]jsPDF with non-latin fonts
问题描述
我想从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> -->
1 个解决方案
解决方案1
0 已采纳 2019-02-08 12:20:13
使用类似于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>
Javascript slug函数与非拉丁字符
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.