Lab 7: Printing Webpage and Bootstrap color customization

Lab 7: Printing Webpage and Bootstrap color customization

Objective

In this lab, you will learn how to print a webpage and customize the color of Bootstrap.

Lab 7.1: Printing Webpage

Printing a webpage is a common task in web development. By calling window.print() in JavaScript, you can print the current webpage. However, the default print result is not very good.

You will learn how to customize the print result. To customize the print result, you need to add the @media print {...} CSS code in the <style> tag of the page.

Step 1: Create a new page in src/views/PrintView.vue

<script setup>
const printPage = () => {
    window.print();
}
</script>

<template>
    <div class="container-fluid">
        <button type="button" class="btn btn-primary" @click="printPage">Print</button>
        <div class="text-center">
            <div class="row mt-1">
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
            </div>
            <div class="row mt-1">
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
            </div>
            <div class="row mt-1">
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
                <div class="col ms-1">
                Column
                </div>
            </div>
        </div>
    </div>
</template>

<style>
@media print {
    body, html {
        width: 210mm;
        overflow: hidden;
    }

    .col {
        background-color: brown;
        color: white;
    }

    header {
        display: none;
    }
    
    .btn {
        display: none;
    }
}
</style>

Step 2: Add a new route in src/router/index.js

To access the page, you need to add a new route in src/router/index.js.

    {
      path: '/print',
      name: 'print',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/PrintView.vue')
    }

Lab 7.2: Customize Bootstrap color

In this lab, you will learn how to customize the color of Bootstrap. To customize the color of Bootstrap, you need to add CSS code in the <style> tag of the page.

Changing button color

To change the color of a button, you need to add the following CSS code in the <style> tag of the page.

Reference: Bootstrap button

.btn-bd-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-indigo);
    --bs-btn-border-color: var(--bd-violet);
    --bs-btn-border-radius: .5rem;
    --bs-btn-hover-color: var(--bs-white);
}

<button type="button" class="btn btn-bd-primary" @click="printPage">Print</button>