I want to render page as PDF, and add there link to other section in the same page. Is it possible in SF?

E.g: first page in the PDF should be table of content, and pressing each title should direct the user to the relevant page in the page.

1 Answer 1


You can do this purely using HTML/CSS. And as HTML and css both supported when we render as PDf so you can achieve this.

Here is a sample code for you.

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;

.toc_title {
    font-weight: 700;
    text-align: center;

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;

<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>

Now, assign the “id” parameter in your heading tags to connect the links from the above list. The following example shows how you can assign an “id” to any heading tags in your page.

<h2 id="First_Point_Header">First Point Header</h2>

Simple Table of Contents (ToC) Using Pure HTML and CSS Code


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .