Enhance the appearance of your printed pages by incorporating borders with the help of wkhtml

Is there a way to print a square border on each page of a multi-page PDF rendered using wkhtmltopdf, similar to the question asked here: Add borders to each printed page with CSS?

I generate an HTML page as a variable and utilize snappy from https://github.com/KnpLabs/snappy to convert it into a PDF.

$html = $this->load->view('print/report_baseline_print',$data,TRUE);

    $snappy = new \Knp\Snappy\Pdf('path to wkhtmltopdf -O landscape');

    $tmp = random_temp_file('.pdf');
    $snappy->generateFromHtml($html,$tmp);
    $filename = 'Baseline-report.pdf';
    $this->output
            ->set_header("Cache-Control: no-cache, must-revalidate")
            ->set_header("Content-Disposition: filename=$filename;")
            ->set_content_type('application/pdf')
            ->set_output(read_file($tmp));
    delete_file($tmp);

Despite trying various methods, such as:

   ....
 <style>
    section:not(:last-child){
            page-break-after: always;
        }
    .box{
        border:1px solid black;
        position:fixed;
        top:10mm;
        right:10mm;
        bottom:10mm;
        left:10mm;
    }
</style>
</head>
<body>
   <section id='page1'>
     <div class='box'></div>
   </section>
   <section id='page1'>
     <div class='box'></div>
 ...

The issue persists where the box breaks over the page. Any suggestions on how to successfully achieve a thin black border printing on each page at a 10mm margin? It seems that the wkhtmltopdf program is not handling the standard print CSS effectively...

Answer №1

It was almost within reach.

All that was left to do was include/modify

.container{
   border:1pt solid black;
   position:absolute;
   width:28.2cm;
   height:19.3cm;
} 

wrapper{
   position:relative;
}

in my CSS customization under the <style> tags

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

Is there a way to seamlessly transition the visibility of the Bootstrap 5.3 Spinner as it loads and unloads?

After delving into some research regarding Bootstrap-compatible spinners, I stumbled upon a piece of code. Take a look: function getData() { var spinner = document.getElementById("spinner"); spinner.style.display ...

Issue with checkbox alignment in Twitter Bootstrap v3.x

Greetings fellow siblings. I am facing an issue with Twitter Bootstrap checkboxes, particularly when viewed in Opera, Chrome, and IE. Here is the problem: I have come across this snippet of code <div class="form-group"> ...

What steps should be taken to populate a grid row if a certain div element is not present?

I am currently using tailwindcss and have this specific HTML code snippet: REPL: https://play.tailwindcss.com/L8McFjGBVC <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class=&qu ...

Ensure that every line of code within the button element contains all the required attributes

Struggling to get the underline on every section of my button. Attempted utilizing the -webkit-box-decoration-break property, but unfortunately it was unsuccessful. https://i.sstatic.net/jsGeQ.png It is necessary for both the initial line (New Delhi,) an ...

Integrating tilt and zoom functionality on a web page based on mouse movements

While browsing through some messages on chat, I came across something interesting: I noticed that as I moved my mouse left or right, the content would tilt in that direction, and when moving up and down, the content would zoom in or out. It was a really c ...

Retrieving Data Attribute From Form Using Python Flask

Is there a way to retrieve data from a POST request in Flask that is not the standard text field value? I am looking for a solution that does not involve using JavaScript, but rather only Python. Let's consider a simplified example: I need to extrac ...

designing a personalized two-row navbar layout in Bootstrap 4

I have been attempting to design a unique custom navigation bar that I haven't come across anywhere else online. Despite my diligent search for examples or solutions, I have not been able to find what I am looking for. Therefore, I am reaching out her ...

Is it possible to adjust the default zoom level of my website by utilizing HTML or CSS?

After creating my website with a 50% zoom setting, I've encountered an issue where it appears too zoomed in for users whose browser default is set at 100%. How can I fix this problem? I attempted to use *{zoom:50%} in CSS to set the default zoom leve ...

Enhance your website design with Bootstrap's unique styling for jumbotron elements

I am currently working on developing a mobile website for calendar events and I need some help. Here is the basic version of the site that I have created so far: The issue I am facing is that the purple backgrounded areas only cover the text, rather than ...

When the async attribute is added to the HTML code, Angular is no longer defined

Looking to optimize the performance of my website in Chrome Audit, I decided to add 'async' to my script tag like this: <body ng-cloak id="body"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry ...

The dd accordion feature seems to be malfunctioning as it is not working as expected

I'm having an issue with a ddaccordion setup on my website. It seems to stay open all the time instead of functioning as expected. I've double-checked that the correct library is being called and there are no error messages in the console. To tr ...

Sending the complete data from an HTML table to a web method

Is there a way to pass the data from a dynamically generated HTML table grid to a web method using jQuery AJAX? The table grid creates multiple rows on button click at runtime, and I need to send the entire table data. Please refer to the following snaps ...

Safeguard your contact information on the screen

On my classified website, I have concerns about the contact numbers being displayed as plain text in the product details page. This makes them visible to search engines. Is there a way to protect or display phone numbers as images to keep them hidden fro ...

knockoutjs - revolutionizing the quiz-making experience

This is the knockoutjs file: $(function () { $('#info').hide(); QuizViewModel(); ko.applyBindings(new QuizViewModel()); $('#restart').click(function () { location.reload(); }); }); function Qu ...

Android device automatically opens link when CSS :focus is triggered

When using a website, I apply :hover for web and :focus for touch devices on a link. However, on Android devices, when I touch the link, it triggers the :focus and then automatically opens the link. My goal is for it to trigger the :focus and only open th ...

Incorrect viewport widths in Vue Bootstrap fluid containers

I require a container that spans 100% of the available width until it reaches a specific breakpoint (max-width). Upon exploring the official documentation, I came across the responsive fluid container, which appeared to be a suitable choice. Responsive ...

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

Closing Browser Tabs with Javascript or jQuery

I've included a div with survey questions that is hidden by default. When the user tries to close the window or navigate away from the page, I want to display the survey div for confirmation instead of using the browser's default confirm box meth ...

Establishing a unique title and favicon for non-HTML files on a website

Is there a way to specify a title and favicon for non-HTML files on a website? For instance, what if I have a link like https://example.com/files/image-or-something.png. In Chrome, the default behavior is to display the URL of the file as the title, with ...