Создайте PDF из HTML и установите размер страницы и поля

Я пытаюсь создать PDF-файл из HTML-страницы с помощью google-apps-script и установить размер страницы «Письмо», а не «А4» (8,26 X 11,69). Я проверил много похожих постов и на самом деле выяснил цвета фона, изображения и т. д. Связанный Создание PDF из цвета фона HTML в PDF, но я не могу внести какие-либо изменения в размер страницы.

function htmlToPDF() {

  var html = "<h1>Hello world</h1>"
       + "<p>This is just a paragraph"
       + "<p style='color:red;'>I am red</p>"
       + "<p style='color:blue;'>I am blue</p>"
       + "<p style='font-size:50px;'>I am big</p>"
       + "<table style='border-collapse: collapse; width: 698px; height: 115px; background-color: #C5D9F1;' border='0' cellpadding='10'>"
       + "<tbody>"
       + "<tr>"
       + "<td style='padding: 5px;background-color:powderblue;' nowrap='nowrap'><strong>Bold with background-color:</strong></td>"
       + "</tr>"
       + "</tbody>"
       + "</table>";

  var blob = Utilities.newBlob(html, "text/html", "text.html");
  var pdf = blob.getAs("application/pdf");

  DriveApp.createFile(pdf).setName("text.pdf");

  MailApp.sendEmail("[your email here ]", "PDF File", "", 
     {htmlBody: html, attachments: pdf});
}

Я пробовал несколько подходов к установке размера

1) Добавление следующего корректирует маржу до нуля

<style> @page { margin: 0; }

Но добавление ширины и высоты, как показано ниже, ничего не делает.

@page { margin: 0; width: 216mm; height: 279mm }

и/или

@media print { margin: 0; width: 600px; height: 800px }

2) Я даже пытался настроить ширину и высоту при создании вывода HTML следующим образом.

  var h = HtmlService.createHtmlOutput(myHTML);
  h.setWidth(2550);
  h.setHeight(3300);

Спасибо...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
9 303
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как написано в документация,

You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

Однако вы можете использовать экспериментальное свойство size:

<style>
@page  {
  margin: 0;
  size: letter; /*or width x height 150mm 50mm*/
}
</style>

Спасибо, как "размер: буква"; и «размер: 215,9 мм 279,4 мм;» работал.

JBruce 10.04.2019 16:17

Другие вопросы по теме