Question

我想从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>
  -->

Answer 1

使用类似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>

带有非拉丁字体的jsPDF

1 个答案: