CODEWITHSUNDEEP
javascriptjquery
rarksoca
rarksoca

Reputation: 98

How to print the whole long page into one page pdf without split many page in javascript

I want to print pdf from mtlnovel into one page pdf without split many page. For example https://www.mtlnovel.com/pick-up-the-invincible-world-attributes-at-the-start/chapter-1-invincible-attribute-system/

for this example page i use stylus(chrome addon) to set this css to print whole page into one page pdf without split many page.

@media print {
  @page {
    size: 148.5mm 1891mm;
  }
}

but not every chapters of novel is same height size so i need to manually change height size of every chapter

i am novice so i don't know much can i ask how to automitically change print page height for every chapter.

for example i use Custom JavaScript for Websites 2 and this code to get height in mm

height = ((document.documentElement.offsetHeight * 0.2733)).toFixed(0);

but i don't know how to change css i want change page heignt to number i got from code above .for example something like this

@media print {
  @page {
    size: 148.5mm heightmm;
  }
}

Edit; Ok now, i try making this and work well for me

(function() {
  document.addEventListener('keydown', (e) => {
    if (e.keyCode === 37) {
      autoresize();
    }
  });
})();

function autoresize() {
  let height = ((document.documentElement.offsetHeight * 0.2733)).toFixed(0);
  var dst2 = document.getElementById("style2");
  if (dst2 != null) {
    document.getElementById("style2").remove();
  }
  var style = document.createElement('style');
  style.type = 'text/css';
  style.id = 'style2';
  style.innerHTML = '@media print {@page {size: 148.5mm ' + height + 'mm;}}';
  if (document.body != null) {
    document.body.appendChild(style);
  }
}

Upvotes: 0

Views: 475

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13623

If you only need to do this for personal use (not programmatically for visitors to your site), you can use the Chrome devtools to save a fullpage screenshot of a site you are on:

  1. Open Chrome Dev Tools on the site in question
  2. From the devtools, type Ctrl + Shift + P (Command + Shift + P on Mac)
  3. The command palette will open-- type "screenshot" into it
  4. From listed options, select "Capture full size screenshot"

Wait a moment for it to take the full screenshot-- it will show up like a download in that tab when it completes (it won't show up in your actual downloads page, though-- but it will drop a file in your downloads destination). You can then print this file to a PDF however you please.

One caveat-- this won't always work with sites that have some internal scrolling not on the <body> element, so in some cases you'll have to futz with the styles to get it right.

Upvotes: 1

Related Questions