Reading chrome's ctrl+p data

Question

Is it possible with chrome extension to read ctrl+p data and save it as pdf or html without showing print screen?

See [Get PDF of the current page in a Google Chrome extension](//stackoverflow.com/a/14001104) — wOxxOm, Mar 15 '19 at 17:02
You can hide or delete the elements on the page, save the data, then restore them. — wOxxOm, Mar 15 '19 at 17:15
That's supposed to be the job of [chrome.printerProvider](https://developers.chrome.com/apps/printerProvider#event-onPrintRequested), where the data would be accessible either as "application/pdf" or "image/pwg-raster" Blob inside job's `document` property, but somehow, I myself was unable to use that API... — Kaiido, Mar 29 '19 at 01:21
Use [printProvider](https://developers.chrome.com/apps/printerProvider) to attach a listener to listen for print events. — Raymond, Mar 30 '19 at 03:27
I understand what you want. AFAIK, `ctrl+p` data(or the paper you see if you printed a webpage) is nothing special but the same rendered HTML page you were on when you pressed `ctr+p` with exception that the [CSS print media](https://www.tutorialspoint.com/css/css_printing.htm) rules is applied instead of the screen media rules. So websites that wants to make their pages look more beautiful when it's printed than the default page, they help the browser by making CSS print rules, or print [only part of the page](https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div) — Accountant م, Apr 04 '19 at 18:29

Maytham Fahmi · Answer 1 · 2019-04-01T10:18:27.450

You can solve this using JavaScript and any Free html to pdf generator that can save pdf document.

Here is how I solved it in steps:

Disable and Override ctrl + p function so it does not show printing screen.
When override in step 1, call any function you want like Html to Pdf generator that can save document and save.

That's it. Now how the code looks like?

In this solution I used jQuery and jsPdf generator.

So add cdns in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

Here after insert following jQuery code to disable and override print feature:

//Override ctrl+p and excute another function
$(document).bind("keyup keydown", function(e){
  if(e.ctrlKey && e.keyCode == 80){
    Print(); 
    e.preventDefault();
  }
});

Create a print function that call pdfGenerator function or multiple other functions:

//Print My Way
function Print(){
  console.log("for testing to see if this is called");
  pdfGenerator()
}

//Use any other print method, in this case I print/save html to pdf as downloadable
function pdfGenerator(){
  var doc = new jsPDF();
  doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
  });
  // instead of Test.pdf you can make give the name of the page.
  doc.save('Test.pdf');
}

That is it. If you need this to work only with Chrome than you need to detect browser type following this answer.

To see all this sample put together here is the full code:

<!doctype html>

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
</head>

<body>
  <p>This is my page and ctrl+p will prevent print screen but print this page as downloadable pdf</p>

<script>
  //Override ctrl+p and excute another function
  $(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
      Print(); 
      e.preventDefault();
    }
  });

  //Print My Way
  function Print(){
    pdfGenerator()
    //additional function do something else.
  }

  //Use any other print method, in this case I print/save html to pdf as downloadable
  function pdfGenerator(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
      'width': 170, 
    });
    doc.save('Test.pdf');
  }
</script>

</body>
</html>

Resources:

jsPdf
jQuery

Demo

Nice answer, but the problem is that OP wants the page that will be printed if he clicked `ctr+p`, your answer will ignore the CSS print media rules which might hide large parts of the page, change colors when the page is printed rather than displayed on screen, check my [comment](https://stackoverflow.com/questions/55187356/reading-chromes-ctrlp-data#comment97749723_55187356). I will bookmark your answer as HTML->pdf solution thought. — Accountant م, Apr 04 '19 at 18:33
Hi thanks for your answer. The problem occurs when you print the thing that does not give html source like you are using `doc.fromHTML($('body').get(0), 15, 15, { 'width': 170, });` — m.qayyum, Apr 04 '19 at 20:15
For example i have opened a pdf and want to print and save part of it, this wont work. — m.qayyum, Apr 04 '19 at 20:15
@Accountantم after checking media print I was not thinking that part hence may the question was not explicitly mentioned that part. that said I will see what kind of possible are to do and will possibility add/update my answer. — Maytham Fahmi, Apr 04 '19 at 20:51

score 1 · Answer 2 · answered Apr 04 '19 at 22:12

To read what is on the clipboard this works.

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

To prevent CTRL+P put this into your head tag

<link rel="alternate" media="print" href="alternativeUrlForPrint.ext" />

Use the L2i Library to capture what is in your console, it will capture anything you put there using the above code. Then you just download it with a function.

l2i.download();

Lastly you can put this all into TamperMonkey to make it an extension.

Reading chrome's ctrl+p data

2 Answers2