Я пытаюсь создать файл PDF, используя только Apex (без использования VF).

У меня проблемы с использованием основных свойств CSS, таких как ширина и высота, я пытался включить их в заголовок, пробовал встроенный, но ничего не меняется:

<div style="width:15in;height:15in;"> Dear John,</div>

enter image description here

Однако, когда я пытаюсь использовать другое свойство, например, установить цвет, оно работает.

<div style="width:15in;height:15in;color:blue;">

enter image description here

String myHtmlString = '<html> <head> </head> <body> <div style="width:15in;height:15in;"> Dear John,</div> <div>Thank you for taking the time to speak with us</div> </body></html>';
 
ContentVersion conVer = new ContentVersion();
conVer.ContentLocation = 'S'; 
conVer.PathOnClient = 'scratch.pdf';
conVer.Title = 'ScratchV2'; 
conVer.VersionData = Blob.toPDF(myHtmlString); 
insert conVer;   
/*Creating ContentDocumentLink ....*/

Несколько вопросов:

  1. Возможно ли создать PDF-файл с помощью CSS без использования Visualforce?
  2. Если да, то как включить CSS? где я могу найти поддерживаемые/неподдерживаемые свойства для формата PDF?
  3. Предполагая, что ширина не поддерживается, как я могу изменить положение элементов?

----------- ИЗМЕНИТЬ -----------

Следуя ответу @sfdcfox, я запустил свой код в валидаторе CSS, установленном на CSS2 и удалил все неподдерживаемые свойства до проверки. Но в PDF CSS не отображается: введите здесь описание изображения

Новый HTML:

<html>
   <head>
      <meta charset="UTF-8">
      <style>body{width: 8.5in; height: 11in; margin: 0;}.page{page-break-after: always; position: relative; width: 8.5in; height: 11in;}.page-content{position: absolute; width: 8.125in; height: 10.625in; left: 0.1875in; top: 0.1875in;}.text{position: relative; left: 55px; top: 407px; width: 7in; font-size: 10pt; line-height: 14pt;}.date{float:right;}#main-logo{position: absolute; left: 542px; top: 23px; width: 2in; height:.3in;}</style>
   </head>
   <body>
      <div class="page">
      <div class="page-content">
         <div id="main-logo"></div>
         <div class="text">
            <span class="date">July 16, 2018</span><br>Dear Luke,<br><br>Thank you for being a part of the Infinity Credit Union family! We wanted to share some additional services that we offer to complement your account.<br>
            <ul style="list-style-type: disc;">
               <li><b>Online Banking: </b>The most efficient way to manage your day-to-day finances! Infinity offers free online bill pay, electronic statements, simple fund transfers, and automated account alerts.<br><br></li>
               <li><b>Mobile Banking: </b>Provides the convenience of online banking via your mobile device! Safe, secure, and easy to use, Infinity mobile banking even provides the ability to make check deposits directly from your phone.<br><br></li>
               <li><b>Student Loans: </b>Preparing to send your son or daughter to college? Infinity provides friendly rates to help cover the costs of tuition, room and board, and books.<br></li>
            </ul>
            Your Infinity membership opens the door for all kinds of valuable benefits and services. Just give us a call at (800) 555-5555 or visit your local branch to learn more.<br><br>Sincerely,<br><br>Sarah Sandifer<br>Infinity Credit Union 
         </div>
      </div>
   </body>
</html>
1
Json 15 Авг 2021 в 09:46

1 ответ

Возможно ли создать PDF-файл с помощью CSS без использования Visualforce?

Да.

Если да, то как включить CSS? где я могу найти поддерживаемые/неподдерживаемые свойства для формата PDF?

Просто используйте <head><style>...</style></head>. Обратите внимание, что ваш CSS недействителен; div по умолчанию всегда занимает 100% ширины, если только вы не измените его на display: inline-block. Кроме того, см. @page, если вы пытаемся установить размер страницы; все, что переполняется, может создавать несколько страниц или обрезаться вместо того, чтобы увеличивать размер страницы.

Предполагая, что ширина не поддерживается, как я могу изменить положение элементов?

Это поддерживается. Используйте положение: относительное/абсолютное/фиксированное и отображение: встроенное/встроенное-блочное/блочное. Все, что поддерживается в CSS1 и CSS2 должен поддерживаться, а CSS3 обычно не поддерживается.

Документация в лучшем случае неполная, но в основном это просто реализация Flying Saucer, хотя я не уверен, какую версию использует Salesforce.

2
sfdcfox 15 Авг 2021 в 01:12
Спасибо за ответ @sfdcfox, ширина и высота были просто примерами, чтобы продемонстрировать, что css работает не так, как ожидалось. Следуя вашему ответу, я запустил свой код в валидаторе, но теперь вижу, что CSS не отображается. Пожалуйста, смотрите мой обновленный вопрос ^
 – 
Json
15 Авг 2021 в 09:48
1
Я должен сказать, что мой (смутный и далекий, ~ 2017) опыт заключался в том, что CSS не работал у меня. Мне пришлось индивидуально стилизовать элементы, что было полной PITA.
 – 
Phil W
15 Авг 2021 в 11:18
Tbh, я никогда не использовал его до этого вопроса; Я предположил, что это работает так же, как обычный HTML. Тем не менее, похоже, что таблицы стилей (возможно, даже сама <head>) не поддерживаются. Это не рассматривается ни в одной документации. Я должен поспрашивать и посмотреть, есть ли кто-нибудь, кто знает.
 – 
sfdcfox
15 Авг 2021 в 17:09