Слияние кода завершено, страница обновится автоматически
1000,
// Простой плагин для нумерации страниц, опционально (по умолчанию не включён), указанные опции являются значениями по умолчанию при включении.
simplePageNum: {
// С какой страницы начинать нумерацию страниц, значение по умолчанию: 0 означает начало с первой страницы. Если вы не уверены в начальной странице, вы также можете указать селектор CSS, например: ".first_page", что означает начало нумерации со страницы, содержащей узел селектора.
pageBegin: 0,
// На какой странице заканчивать нумерацию, значение по умолчанию: -1 означает окончание на последней странице. Если вы не уверены в конечной странице, вы можете также использовать селектор CSS, такой как: ".end_page", чтобы указать страницу, на которой заканчивается нумерация.
pageEnd: -1,
// Компонент страницы, опциональный
pendant: '<div class="page-num-simple"><span style="">$' + '{PAGE} / $' + '{TOTAL_PAGE}</span></div>',
},
// Плагин каталога/закладки, опционально (по умолчанию не включён), указанные параметры являются значениями по умолчанию при включении.
simpleCatalog: {
// Текущая версия, если требуется создать PDF закладки, toolBar.serverPrint.wkHtmlToPdf должен быть истинным
// Не изменяйте titlesSelector, используйте h1-h6 для создания закладок.
titlesSelector: 'h1,h2,h3,h4,h5,h6', // Опционально, используется как селектор заголовков каталогов, упорядоченных по уровню каталога.
/** Параметры, связанные с каталогом **/
showCatalog: true, // Опционально, следует ли вставлять каталог на страницу, по умолчанию каталог вставляется на страницу.
header: '<div class="catalog-title">Оглавление</div>', // Опционально, часть заголовка страницы, можно добавить всё, что вы хотите.
itemFillChar: '…', // Опционально, символ заполнения элементов каталога, "" пустая строка, без заполнения, при использовании пользовательской функции makeItem этот параметр будет проигнорирован.
positionSelector: '.nop-page-item-pagenum-1', //Опционально, позиция вставки каталога находится перед соответствующей страницей, по умолчанию — перед первой пронумерованной страницей.
// Опционально, пользовательский элемент каталога.
makeItem: function(itemEl, itemInfo) {
/**
* @var itemEl jQuery Element
* @var object itemInfo PS: {title, pageNum, level,linkId}
**/
return '<div>Пользовательский элемент каталога HTML-контент, созданный в соответствии с itemInfo.</div>';
},
/** Боковая панель (PDF закладки) связанные параметры **/
showSlide: true, // Опционально, показывать ли боковую панель, каталог навигации, кнопки панели инструментов упорядочены index: 200, недействительно, когда bookConfig.toolBar имеет значение false.
slideOn: false, // Опционально, состояние открытия боковой панели навигации по каталогу, по умолчанию открыто.
slideHeader: '<div class="title">Каталог</div>', // Опционально, заголовок боковой панели.
slideClassName: '', // Опционально, класс боковой панели.
slidePosition: 'left', // Опционально, положение left или right.
slideMakeContent: null, // Пользовательская функция обработки содержимого боковой панели, null означает использование содержимого каталога для заполнения по умолчанию.
},
// Панель инструментов, опциональная (по умолчанию включена), object|false, false не отображает панель инструментов, указанные параметры являются значениями по умолчанию при включении.
toolBar: {
// Кнопка веб-печати, опционально, значение по умолчанию true, индекс кнопки: 100.
webPrint: true,
/**
* Кнопка сохранения HTML, опционально, bool|object, значение по умолчанию false: отключить сохранение HTML, true: включить и использовать значения по умолчанию, object: использовать пользовательские настройки для сохранения.
* Значение по умолчанию для true равно object: serverPrint: { serverUrl: '/' },
* Для использования serverPrint сервер должен иметь доступ к вашей веб-странице. Веб-страница не должна использовать авторизацию на основе состояния входа, рекомендуется передавать временные разрешения через URL-параметры.
* Если вы используете официальный сервер для печати, вам необходимо убедиться, что ваша веб-страница, созданная с помощью bookjs-eazy, доступна в Интернете.
*
* serverPrint: {
* // Опциональный, адрес сервера печати, индекс кнопки: 400
* serverUrl: '/',
*
* // Опционально, true использует wkHtmlPdf для создания, false: по умолчанию использует chrome headless
* // **Примечание**: wkhtmltopdf не поддерживает es6, некоторые новые функции веб-сайтов отсутствуют, но преимущество заключается в том, что он может создавать каталоги PDF.
* // Для лучшей отладки проблем: пожалуйста, загрузите QtWeb Browser, его ядро такое же, как у wkhtmltopdf.
* // Меню->Инструменты->Включить веб-инспектор, щелкните правой кнопкой мыши содержимое страницы и выберите «Проверить», чтобы открыть панель инструментов отладки.
* // Таким образом, вы можете обнаружить различные проблемы совместимости.
* // В браузере QtWeb по умолчанию используется режим печати без отображения интервалов между страницами и панели инструментов.
* // Ссылка для скачивания: http://www.qtweb.net/download.html
* wkHtmlToPdf: false,
*
* // Опциональное, имя файла сохранения, значение по умолчанию document.title + '.pdf'
* fileName: 'output.pdf',
* // Опциональные параметры печати
* params: {
* // Время ожидания печати
* timeout: 30000,
* // Задержка после завершения рендеринга страницы перед печатью
* delay: 1000,
* },
* // Опциональная, настраиваемая загрузка. Может использоваться при смешанной загрузке приложений.
* save: function(pdfUrl, serverPrintOption){
*
* }
* }
*/
serverPrint: false,
buttons: [
// Здесь вы можете настроить кнопки панели инструментов
// {
// id: 'cloudPrint',
// index: 1, // Индекс позиции кнопки, чем меньше значение, тем раньше отображается, значение индекса системных кнопок см. в описании каждой конфигурации.
// icon: 'https://xxxx.../aa.png'
// onClick: function(){
console.log("...do some thing"); }
// }
],
className: '', // 额外自定义的 class 属性
position: 'right', // 位置：right、left
}
}
</script>
PDF 内容设计 (约定页面内容分页方式)
<body>
<div id="content-box">
<p data-op-type="text">Hello World!</p>
</div>
</body>
block: блок, неразделимый (по умолчанию).
text: текст, разделимый на разные страницы.
new-page: новая страница, контролируется вручную.
pendants: элементы страницы, фиксированные относительно положения страницы (верхняя часть страницы, нижняя часть страницы и т. д.).
Контейнеры (mix-box, table, block-box и text-box): могут быть разделены и содержат стили макета.
Контейнеры включают mix-box, table, block-box и text-box. Подробности см. в соответствующих разделах.
Обратите внимание: не ограничивайте высоту контейнеров (например, height или max-height), так как это может повлиять на обнаружение переполнения и привести к неожиданным результатам.
mix-box: смешанный контейнер (обычно используется).
Контейнер mix-box может содержать несколько элементов [data-op-type="text"] и [data-op-type="block"].
Когда содержимое выходит за пределы одной страницы, оно автоматически разделяется по правилам text/block и переносится на следующую страницу, при этом копируется внешний узел, содержащий контейнер.
Пример: см. пример смешанного контейнера.
Используется в позиции #content-box > дочерних узлов первого уровня.
table: таблица, также особый вид контейнера.
Для таблиц, сталкивающихся с проблемой отображения при разделении страниц, были внесены некоторые улучшения (обратите внимание: столбцы должны иметь фиксированную ширину).
В ячейках таблицы td можно использовать элементы [data-op-type="text"] или [data-op-type="block"] в качестве прямых дочерних элементов.
Используйте в позиции #content-box > дочерних узлов первого уровня. Дизайн: связанные детали
Шрифт:
<style>
@font-face {
font-family: YH;
src: url(./fonts/msyh.ttf);
font-weight: 400;
font-style: normal
}
body {
font-family: "Microsoft YaHei", YH, sans-serif;
font-weight: normal;
}
</style>
/**
* BOOK рендеринг перед завершением book.before-complete
**/
$(document).on('book.before-complete',function (e,info) {
/**
* info:
* {
* "PAGE_BEGIN_INDEX": 0, // начало страницы
* "PAGE_END_INDEX": 2, // конец страницы
* "TOTAL_PAGE": 3 // общее количество страниц
* }
**/
});
Печать и фоновый рисунок:
Нечётные и чётные страницы:
После установки плагина для упрощённой нумерации страниц, элементы получают соответствующие классы: nop-page-item-odd (нечётная страница), nop-page-item-even (чётная страница) и nop-page-item-pagenum-1 (номер страницы).
Если текст или блок разделяется на другую страницу, соответствующая часть помечается классом nop-link-last. Это позволяет обрабатывать такие элементы особым образом.
В узлах Book указывается тип браузера. Классы: chrome, firefox, safari, ie, qq, wechat, wkhtmltopdf.
Для узлов Book используются классы nop-book-preview (предварительный просмотр) и nop-book-print (печать).
Можно добавить метатеги в HTML-код, которые будут включены в свойства PDF. С версии 1.12.0 это работает и для серверной генерации. Пример:
<meta name="author" content="nop">
<meta name="description" content="bookjs-eazy so eazy!!">
<meta name="keywords" content="PDF, bookjs">
Генерация PDF и использование инструмента командной строки:
Нажмите кнопку «Печать» и выберите «Сохранить как PDF».
Используйте опцию bookConfig.toolBar.serverPrint. Серверную печать можно настроить с помощью значения true (эквивалентно {serverUrl: '/'}) или {serverUrl: '//your_screenshot_api_server_host[:WEB_PORT]/'}.
Быстрое развёртывание осуществляется с помощью команды ./docker-start.sh. Можно создать файл book.html в каталоге dist и получить доступ к нему через http://127.0.0.1:3000/book.html для предварительного просмотра или скачивания PDF. Созданные PDF-файлы находятся в каталоге dist/pdf/.
Предварительно установите Node.js и Yarn. Затем выполните следующие шаги:
Установите зависимости с помощью команды yarn install. Затем используйте команду bin/html2pdf print для создания PDF из URL. Пример:
bin/html2pdf print --output eazy-2-1.pdf "https://bookjs.zhouwuxue.com/eazy-2.html"
Команда имеет следующие опции:
-o или --output [outputfile]: путь сохранения PDF-файла (по умолчанию: output.pdf).
-t или --timeout [type]: время ожидания (по умолчанию: 60000).
-a или --agent [agent]: используемый движок преобразования (chrome-headless или puppeteer, по умолчанию: puppeteer).
-d или --printDelay [delay]: задержка перед печатью (в миллисекундах, по умолчанию: 1000).
-c или --checkJs [jsExpression]: выражение для проверки завершения рендеринга (по умолчанию: window.status === 'PDFComplete').
-h или --help: вывод справки по команде. ## Команды для печати с использованием wkhtmltopdf (генерирует PDF-закладки h1-h6)
bin/pdf-a4-landscape "https://bookjs.zhouwuxue.com/eazy-2.html" eazy-2-2.pdf
В каталоге bin есть несколько аналогичных скриптов.
Синтаксис: bin/pdf-[формат бумаги]-[ориентация] [предварительный просмотр ссылки] [выходной файл]
<span> <span> на страницу.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )