Экспорт содержимого области DIV в HTML с использованием Java Script - PullRequest
0 голосов
/ 20 июля 2010

Как экспортировать содержимое области DIV с HTML-страницы в PDF?.

Возможно ли использовать без стороннего инструмента, с помощью JavaScript?.

Пожалуйста, предложите

1 Ответ

0 голосов
/ 08 сентября 2014

Вот что я получаю: https://stackoverflow.com/a/24825130/3810453, когда я обращаюсь к great-magician-google и нажимаю ПЕРВАЯ ссылка.

jsPDF может использовать плагины.Для того, чтобы он мог печатать HTML, вы должны включить определенные плагины и, следовательно, должны сделать следующее:

Перейдите на https://github.com/MrRio/jsPDF и загрузите последнюю версию.Включите в свой проект следующие сценарии:

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

Если вы хотите игнорировать определенные элементы, вы должны пометить их идентификатором, который затем можно игнорировать в специальном обработчике элементов jsPDF.Поэтому ваш HTML должен выглядеть следующим образом:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html> 

Затем вы используете следующий код JavaScript, чтобы открыть созданный PDF-файл во всплывающем окне:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};

var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Для меня это создало приятный и аккуратныйPDF, содержащий только строку «напечатать это в pdf».

Обратите внимание, что специальные обработчики элементов работают только с идентификаторами в текущей версии, что также указано в выпуске GitHub.В нем говорится:

Поскольку сопоставление выполняется для каждого элемента в дереве узлов, я хотел сделать это как можно быстрее.В этом случае это означало «Совпадают только идентификаторы элементов». Идентификаторы элементов по-прежнему выполняются в стиле jQuery «#id», но это не означает, что поддерживаются все селекторы jQuery.'с селекторами классов типа' .ignorePDF 'у меня не сработало.Вместо этого вам придется добавить один и тот же обработчик для каждого элемента, который вы хотите игнорировать, например:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

Одна очень важная вещь, которую нужно добавить, это то, что вы потеряете всю информацию о стиле (CSS).К счастью, jsPDF умеет красиво форматировать h1, h2, h3 и т. Д., Что было достаточно для моих целей.Кроме того, он будет печатать текст только внутри текстовых узлов, что означает, что он не будет печатать значения текстовых полей и тому подобного.Пример:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

и нет, вы не можете печатать без стороннего инструмента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...