После того, как в прошлый раз ступили на яму h5, к нам пришли новые требования, и необходимо сгенерировать pdf, в содержание входит обложка, оглавление, а затем текст, в содержание текста входят верхние, нижние колонтитулы, диаграммы , таблицы, картинки, карты и многое другое.Место должно отображаться по-разному в соответствии с разными значениями полей, то есть содержимое не является фиксированным.
Окончательный эффект
используемая структура
jspdf (отброшен)
Проблема, которую я нашел о jspdf в Интернете, заключается в том, что макет относительно жесткий, изображения не могут быть преобразованы, а эффект разбиения на страницы оставляет желать лучшего. Тогда просто выбросьте его. (Некоторые друзья сказали, что jspdf также подходит. В сочетании с html2canvas также можно выполнить некоторые основные требования. Необходимо изучить реализацию каталогов, верхних и нижних колонтитулов.)
tcpdf(первое издание)
Компания использовала этот плагин и раньше, но он не поддерживался с 2005 г. Когда мы писали первую редакцию, хотя общее наполнение по требованиям было реализовано, конечно, процесс внедрения был болезненным. все макеты можно использовать только табличный макет, почему бы не использовать padding, margin и т.д., ведь он не поддерживается (плакать хочется), а тут проблема каталога, в начале я считал, что фронтенд может рассчитать высоту каждого заголовка сверху, в Рассчитано по высоте сгенерированной страницы pdf, страницы, на которой расположен заголовок, но очень неточно, высота, рассчитанная домом, сильно отличается от высоты, сгенерированной окончательный pdf
wkhtmltopdf(Окончательный версия)
Этот фреймворк хорош, прост и удобен в использовании, и в основном поддерживает большую часть css во внешнем интерфейсе, за исключением ям в каталоге (только младшая версия поддерживает пейджинг, сейчас мы используем wkhtmltopdf версии 0.12.3), обложку нужно прописать на отдельной странице, а директорию нужна только команда. Ее можно сгенерировать при условии, что заголовок, соответствующий коду, обернут тегом h1, а итоговая сгенерированная директория хороша, за исключением стиля, которым нельзя управлять , и щелкнув заголовок каталога, можно также перейти на страницу, на которой находится соответствующий заголовок. Ниже приведен основной код
//生成pdf命令
wkhtmltopdf --page-width 210mm --page-height 297mm --margin-top 15mm --header-left "这里是你的表头啦左边啦" --header-right "[date] [time] 机密文件请勿外传" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-" cover 这里是你提前写好的封面的地址 toc --toc-header-text "目录" 这里是你要生成pdf的地址 D:\\1.pdf
// 页面的h1标签
<h1 class="item-title">
项目信息
</h1>
Пункты к сведению
Таблица будет разделена, когда она охватывает страницы
Сгенерированный PDF имеет следующий эффект при нумерации страниц
table{
page-break-before: left;
}
Карта Байду
Я хочу преобразовать карту на картинку, но все возвращенные карты через карту Baidu представляют собой HTML, а карты карты внутри собраны один за другим, даже если я беру скриншоты через HTML2CANVAS. Наконец, позвольте обратно просмотреть документацию карты Baidu и напрямую выведите ссылку PNG карты.
Диаграмма Echarts
Поскольку диаграмма представляет собой каваны, нам нужно преобразовать ее в картинку и присвоить ей тег img.
let echartKLine = echarts.init(this.$el.querySelector('.js-kline'));
echartKLine.setOption(_option);
$("#"+this.mykey).attr("src",echartKLine.getDataURL())//通过getDataURL的方法
водяной знак
Простой способ найти водяной знак — разбить самый внешний слой всего PDF-файла с помощью фонового метода.
.pdfContainer{
background-image: url('背景图片地址');
background-size: 300px;
}