Can the PDF document be set to print instead of the webpage?

As a junior developer, my current project involves creating a resume on github.io that is employer-friendly. While I have successfully set up print settings in chrome and firefox resulting in a 2-page format, safari and edge display it as 4 pages.

An important feature I implemented was a "download pdf" button which generates a well-formatted pdf mirroring the print settings. My goal is to ensure that both the download pdf and general print buttons produce the same format for employers’ convenience.

I am exploring ways to automatically use the pdf file when the print option is selected, instead of printing the webpage itself. This would streamline the process and guarantee consistent formatting across all browsers without the need for individual setup.

If necessary, I am willing to incorporate scripts to achieve this functionality.

Answer №1

If you're looking to create a PDF, you may want to explore jspdf, or you could use the @media print rule to specify which styles should be included in the print version.

In response to your previous question - since your webpage consists of static elements only, why not simply generate a PDF file, upload it to your server, and add a link button for users to download? One easy method is to design your content in Photoshop (or even in MS Word), save it as a PDF, and follow that approach.

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

Attempting to alert a particular device using Flutter for notification delivery

Currently, I am developing a Chat app using Flutter and attempting to send notifications to specific devices through Firebase functions. Initially, I retrieve the device token and store it in Firebase. Now, my challenge lies in fetching the token and invok ...

Having trouble displaying ES6 promise value in AngularJS view

Currently, I am working on a project where I am utilizing the Pinterest JavaScript SDK to retrieve some pin data. In order to achieve this, I have created a Pinterest service with a method that is invoked in my HomeController. To fetch the response and d ...

Creating a visually appealing gantt chart in React Native using the react-google-charts library - here's how!

These are the current packages I am using: react-google-charts 1.5.5 react 16.0.0-beta.5 react-native https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz I am currently working on rendering a Gantt Chart and you can find an example here and a ...

Tips for ensuring that the "this" in React ES6 static method is bound to the lexical scope

Currently in React with ES6 via babel, my goal is to develop a static method that can update the state of the Component it belongs to by accepting an object as an argument. However, I'm facing an issue where "this" is not bound to the lexical scope. ...

Ensuring the validity of a file input through AJAX in a form built with Laravel

I am facing an issue with validating an image field in a Laravel form using AJAX. The field always appears to be empty even after selecting a file. How can I use ajax validation to check if the file input is empty or not? Here is the form code: {{ Form:: ...

Top solution for maintaining smooth navigation across web pages

As I dive into the world of web development, I find myself intrigued by the idea of reusing navigation and banners across multiple web pages. However, despite my research efforts, I have yet to come across a definitive answer. My objective is simple: The ...

Collaborating on validating inputs and modules for both backend and frontend

Sharing input validation is crucial for various reasons: Immediate feedback to users on the frontend regarding the validity of their input Enhanced security measures in the backend, preventing manipulation of data through the API Dependency on frontend J ...

Exploring the usage of promises with data in VueJS async components

Experimenting with VueJS 2.0 RC and utilizing the fetch API to retrieve data for certain components. Here's a sample scenario: const Component = { template: '#comp', name: "some-component", data: function () { return { basic ...

Is there a way to choose all elements in the Bootstrap pagination code using JavaScript?

Recently, I've been working on a website with Bootstrap, and I encountered an issue with the overflow scroll bar that I had to hide using CSS. To navigate the pagination with the mouse wheel, I've been experimenting with JavaScript. I found that ...

Experience the captivating effect of jQuery's fade in animation as one image gracefully

I have an 800x500 image where the bottom two quadrants feature edits to the graphics that I want to fade in gradually. If we divide the whole image into AB CD Sections C & D are what will be covered up after 10 seconds with two images fitting in the bott ...

React 16 is able to efficiently render an array of numbers into table data using the map function

In my quest to display the most frequently used words, I have successfully fetched data from an API. I have set up the state for words and mapped the array in render(). However, instead of displaying the words along with their counts, I only see numbers ...

Is it possible to replicate, modify, or recycle a purely HTML and CSS component in Angular?

On my Angular website, I am looking to reuse a component across more than 30 pages. While the majority of the pages have similar CSS, the content inside varies. I know I can simply insert <app-example></app-example> on all the pages, using < ...

Unusual behavior observed in the angular-daterangepicker module

I'm currently working on an Angularjs application and utilizing the angular-daterangepicker to input dates into a table. Upon the initial load of the app, the startDate is automatically set to the current day and the endDate is set to 4 days later. T ...

Use two fingers to scroll up and down on the screen

I am currently developing a sketch web application (using angular) that utilizes one finger gestures for drawing. My goal is to enable vertical scrolling in the sketch content by using two fingers. However, when attempting to scroll with two fingers, Safa ...

Why isn't the dropdown menu displaying beneath the background in bootstrap / HTML / CSS?

Having trouble creating a navbar with a dropdown menu on the right? I encountered an issue where the menu doesn't show up when clicked. However, after removing all CSS styles, the button starts working. .info { margin-top: 15%; display: table; ...

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

Styling text over an image when hovering with CSS and HTML

I have successfully implemented a functionality, but I am looking to enhance the appearance of the text displayed when an image is hovered over. Below is the current code snippet: .ecommerce-categories [class^=col-] > a:before { content: attr(data- ...

JavaScript code to generate a UTF8 string from UTF codes

I am in possession of the byte representation of UTF8, such as: 195, 156 for "Ü" (capital U Umlaut) I am struggling to generate a JavaScript-compatible string from these numbers - all my attempts have been unsuccessful. Every method I have tried has mis ...

React: How to Close a Modal in a Child Component Using the Parent Component

In a scenario where I have a modal in a child component that manages a delete function in the parent component, it seems like the most appropriate choice to have the child component hold the state of the modal (whether it is open or closed). Parent Compon ...

Ensure that the textbox remains safe from accidental keyboard inputs

How can I ensure that users can only select a date from the calendar control in my textbox, rather than typing it manually, even if I make the textbox read-only? ...