Shiny 应用程序是否有“将页面另存为 PDF”？

Question

I posted an earlier question here about printing the page of a Shiny app to a pdf file for further use.

So I have found this Javascript code to print out certain CSS element to pdf

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

And I put that in a .js file in my RShiny project folder, and include includeScript("pdfOut.js") in my ui function (that the filename of the .js file). I also change the id of the element to those in my app as following:

$('#printPdf_CA').click(function () {
    domtoimage.toPng(document.getElementById('mainOrder_CA'))
        .then(function (blob) {
            var pdf = new jsPDF('l', 'pt', [$('#mainOrder_CA').width(), $('#mainOrder_CA').height()]);

            pdf.addImage(blob, 'PNG', 0, 0, $('#mainOrder_CA').width(), $('#mainOrder_CA').height());
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
        });
});

Basically, I want to print the element mainOrder_CA (which is a div) into a pdf file name test.pdf if the app user clicks a button with id printPdf_CA

But it does not work. Nothing comes out, and there are no error message whatsoever. My app still runs as usual. I have zero knowledge on JS. Any advice on how to modify that code ? Basically, I am looking to print a div element into pdf when a user clicks an actionButton

Here is the original post for the JS code here

Answer 1

You have to load the JS libraries jsPDF and dom-to-image .

library(shiny)

js <- "
$(document).ready(function(){
  $('#printPdf_CA').click(function () {
    domtoimage.toPng(document.getElementById('mainOrder_CA'))
      .then(function (blob) {
        var pdf = new jsPDF('l', 'pt', [$('#mainOrder_CA').width(), $('#mainOrder_CA').height()]);
        pdf.addImage(blob, 'PNG', 0, 0, $('#mainOrder_CA').width(), $('#mainOrder_CA').height());
        pdf.save('test.pdf');
        // that.options.api.optionsChanged(); what is that?
      });
  });
});
"

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"),
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"),
    tags$script(js)
  ),
  br(),
  actionButton("printPdf_CA", "Print"),
  div(
    id = "mainOrder_CA",
    h3("Click on the button to print me")
  )
)

server <- function(input, output, session){

}

shinyApp(ui, server)

However, the pdf we get with this app is not nice, it does not respect the dimensions of the div . I don't know why.

---

EDIT

Hmm, this works fine when one removes the margins of the h3 :

h3(style = "margin:0;", "Click on the button to print me")