+ Start a Discussion
Constance HUAConstance HUA 

Word to Visual force to pdf

Hi guys,
I'm trying here to get a PDF from SF page. Therefore, I am creating the page on visualforce. 
I am not a coder so I made the document on Word, saved as HTML and copied the code to my visualforce. 

However, it seems that the writing is not the same as I had to add quotes and end tags like <\meta>. I did all that and in the end, I got the error : element <o:p> not known.

So I tried with Google Sheets to download as HTML and same : I have to close all elements again.

Help! :p

Here is the error : line 6, column 3: The element type "meta" must be terminated by the matching end-tag "</meta>"
Error: The element type "meta" must be terminated by the matching end-tag "</meta>".

Here is my current code :
<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
  <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
@import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF');ol{margin:0;padding:0}table td,table th{padding:0}.c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid}.c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}.c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal}.c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify}.c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto}.c8{font-size:9pt;color:#1155cc;text-decoration:underline}.c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt}.c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt}.title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}.subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left}li{color:#000000;font-size:11pt;font-family:"Calibri"}p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left}h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}</style>
</head>
<body class="c3">
<p class="c9 c1" id="h.gjdgxs">
<span class="c6">
</span>
</p>
<a id="t.43237f724b83829791a3600f5d7a15de7edeb72b">
</a>
<a id="t.0">
</a>
<table class="c5">
<tbody>
<tr class="c11">
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;">
<img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c0">
<span class="c2">
Pleyad Pôle Business - Immeuble Pleyad 2</span>
</p>
<p class="c0">
<span class="c2">47 boulevard Ornano</span>
</p>
<p class="c0">
<span class="c2">93521 Saint Denis – France</span>
</p>
<p class="c0">
<span class="c2">Tel&nbsp;: +33 1 48 20 20 30</span>
</p>
<p class="c0">
<span class="c8">
<a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&amp;sa=D&amp;ust=1494580227154000&amp;usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a>
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4">
<span class="c12">FACTURE N°&nbsp;{!order.OrderNumber}</span>
</p>
<p class="c4">
<span class="c10">Date d’émission : {!Now()}</span>
</p>
</td>
</tr>
</tbody>
</table>
<p class="c9">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</span>
</p>
<p class="c1 c9">
<span class="c6">
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</body>
  </apex:page>
Thank you so much in advance !
 
Best Answer chosen by Constance HUA
Shiva RajendranShiva Rajendran
Hi Constance,
Thanks ,felt very happy regading your reply comments.

You mean to say convert from html to visualforce?
Please dont use Word document . What you have created is html not a word document.You have used word document to create the html.

One very easy way is you have to use xhtml format in html. That is every opening tag needs a closing tag. Normal html doesn't have strict check on the close tag .
ie : every tag has to be closed  including meta .Html works though it is not closed.
Also for looping across all records , you need to know about <apex:repeat> in saleforce.
Let me know if you need any further help in salesforce code work,
Thanks and Regards,
Shiva RV
 

All Answers

Shiva RajendranShiva Rajendran
Hi Constance HUA,

I have made few modifications on the code and the code is working .It displays all the account number with image in it.
Please copy the below code and see if it works properly. 
 
<apex:page standardController="Account" recordSetVar="AllAccounts"  renderAs="pdf" applyBodyTag="false">
  <head>
      <meta content="text/html; charset=UTF-8" http-equiv="content-type"> </meta>
<style type="text/css">
    @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLVumN3ATOVc2BoeDKcwJhFTljiSzuFEcjsip7pjNdcnF');
    ol{margin:0;padding:0}
    table td,table th{padding:0}
    .c13{border-right-style:solid;padding:0pt 5.8pt 0pt 5.8pt;border-bottom-color:#000000;border-top-width:0pt;border-right-width:0pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:0pt;width:261.4pt;border-top-color:#000000;border-bottom-style:solid}
    .c12{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Adobe Fan Heiti Std B";font-style:normal}
    .c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Calibri";font-style:normal}
    .c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal}
    .c10{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:12pt;font-family:"Calibri";font-style:normal}
    .c4{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:right;margin-right:-5.5pt}
    .c9{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}
    .c0{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:justify}
    .c5{margin-left:-5.8pt;border-spacing:0;border-collapse:collapse;margin-right:auto}
    .c8{font-size:9pt;color:#1155cc;text-decoration:underline}
    .c3{background-color:#ffffff;max-width:529pt;padding:28.4pt 40.5pt 70.8pt 42.5pt}
    .c7{color:inherit;text-decoration:inherit}.c1{height:11pt}.c11{height:134pt}
    .title{padding-top:24pt;color:#000000;font-weight:700;font-size:36pt;padding-bottom:6pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
    .subtitle{padding-top:18pt;color:#666666;font-size:24pt;padding-bottom:4pt;font-family:"Georgia";line-height:1.0;page-break-after:avoid;font-style:italic;text-align:left}
    li{color:#000000;font-size:11pt;font-family:"Calibri"}
    p{margin:0;color:#000000;font-size:11pt;font-family:"Calibri"}
    h1{padding-top:12pt;color:#2f5496;font-weight:700;font-size:18pt;padding-bottom:0pt;font-family:"Cambria";line-height:1.0;page-break-after:avoid;text-align:left}
    h2{padding-top:2pt;color:#2f5496;font-weight:700;font-size:13pt;padding-bottom:0pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
    h3{padding-top:14pt;color:#000000;font-weight:700;font-size:14pt;padding-bottom:4pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
    h4{padding-top:12pt;color:#000000;font-weight:700;font-size:12pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
    h5{padding-top:11pt;color:#000000;font-weight:700;font-size:11pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
    h6{padding-top:10pt;color:#000000;font-weight:700;font-size:10pt;padding-bottom:2pt;font-family:"Calibri";line-height:1.0;page-break-after:avoid;text-align:left}
      </style>
      </head>
<body class="c3">
<p class="c9 c1" id="h.gjdgxs">
<span class="c6">
</span>
</p>
<a id="t.43237f724b83829791a3600f5d7a15de7edeb72b">
</a>
<a id="t.0">
</a>
<table class="c5">
<tbody>
    <apex:repeat value="{!AllAccounts}" var="acc">
<tr class="c11">
<td class="c13" colspan="1" rowspan="1">
<p class="c0">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 211.94px; height: 100.48px;">
<img src="https://c.eu4.visual.force.com/resource/1494428198000/Logo_2017" style="width: 211.94px; height: 100.48px; margin-left: -0.00px; margin-top: -0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
    </img>
    </span>
</p>
<p class="c0">
<span class="c2">
Pleyad Pôle Business - Immeuble Pleyad 2</span>
</p>
<p class="c0">
<span class="c2">47 boulevard Ornano</span>
</p>
<p class="c0">
<span class="c2">93521 Saint Denis – France</span>
</p>
<p class="c0">
<span class="c2">Tel&nbsp;: +33 1 48 20 20 30</span>
</p>
<p class="c0">
<span class="c8">
<a class="c7" href="https://www.google.com/url?q=http://www.neofi-solutions.com&amp;sa=D&amp;ust=1494580227154000&amp;usg=AFQjCNG-79zmNmJ099Yk2AO5_V_zrntviA">www.neofi-solutions.com</a>
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</td>
<td class="c13" colspan="1" rowspan="1">
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4 c1">
<span class="c12">
</span>
</p>
<p class="c4">
<span class="c12">FACTURE N°&nbsp;{!acc.accountNumber}</span>
</p>
<p class="c4">
<span class="c10">Date d’émission : {!Now()}</span>
</p>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
<p class="c9">
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
    </img>
    </span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 340.23px; height: 148.85px;">
<img src="https://c.eu4.visual.force.com/resource/1494436004000/Encadre_facture" style="width: 340.23px; height: 148.85px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="">
</img>
</span>
</p>
<p class="c1 c9">
<span class="c6">
</span>
</p>
<p class="c0 c1">
<span class="c2">
</span>
</p>
</body>
  </apex:page>

Note :
The modifications i have made are 
close tag for img and meta html tag </img> </meta> . Also used apex:repeat and used recordSetVar="AllAccounts" at the header
Let me know if this is the output you have expected.
Thanks and Regards,
Shiva RV
Constance HUAConstance HUA
Hi Shiva, 

Thank you that's fantastic!
Do you know by any chance if there is an easy way to convert a word document in the correct code for visualforce? 

All the best,
Constance
Shiva RajendranShiva Rajendran
Hi Constance,
Thanks ,felt very happy regading your reply comments.

You mean to say convert from html to visualforce?
Please dont use Word document . What you have created is html not a word document.You have used word document to create the html.

One very easy way is you have to use xhtml format in html. That is every opening tag needs a closing tag. Normal html doesn't have strict check on the close tag .
ie : every tag has to be closed  including meta .Html works though it is not closed.
Also for looping across all records , you need to know about <apex:repeat> in saleforce.
Let me know if you need any further help in salesforce code work,
Thanks and Regards,
Shiva RV
 
This was selected as the best answer
Constance HUAConstance HUA
Thanks a lot it is much clearer now, I will definitely use xhtml from now on and I'll check the looping use.

All the best
Constance