Spire.PDF is a professional PDF library applied to creating, writing, editing, handling and reading PDF files without any external dependencies. Get free and professional technical support for Spire.PDF for .NET, Java, Android, C++, Python.

Fri Apr 07, 2023 2:26 am

Hi, I am currently exploring tools for generating PDFs from the current screen in our company's project.

We are currently using wkhtmltopdf, but due to many issues, I have been asked to investigate the feasibility and performance of Spire.pdf for Java as an alternative. During this process, I have a few questions I'd like to ask.

1. Is JavaScript ES6 supported?
2. Can PDFs be created with the inclusion of advanced script elements such as Chart.js and D3.js?
3. Is support for modern CSS (e.g., flex option) and local fonts available?

Our development environment is a Linux server-based project using Java, Spring, and Spring Boot, with the goal of converting the configured web content into PDFs.
If you want to more information, that time you can require more.

Thanks.

gangssun
 
Posts: 4
Joined: Fri Apr 07, 2023 2:15 am

Fri Apr 07, 2023 8:36 am

Hi gangssun,

Thank you for your inquiry.

Our Spire.Pdf for Java has the capability to convert HTML to PDF, which can fulfill your requirement of converting web content to PDF. Here are the answers to your three questions:

1. Is JavaScript ES6 supported?
Yes, it is supported.

2. Can PDFs be created with the inclusion of advanced script elements such as Chart.js and D3.js?
After preliminary testing, we found that charts created using Chart.js did not appear in the PDF, but contents manipulated using D3.js were successfully rendered.

3. Is support for modern CSS (e.g., flex option) and local fonts available?
Yes, it is supported.

We suggest downloading our Spire.PDF for Java and referring to the help documentation at link to test this feature and see if it meets your expectations.

If you have any further questions, please feel free to contact us. We are always happy to assist you.

Sincerely,
Ella
E-iceblue support team
User avatar

Ella.Zhang
 
Posts: 42
Joined: Fri Apr 07, 2023 7:42 am

Fri Apr 07, 2023 9:05 am

Thank you so much for your kind response.
I have a few more questions, we are testing with your documentation. We were asked to check if there is any documentation on how to apply java script in this process, and we were wondering how you tested the d3.js application.
From what I've heard, d3.js didn't seem to be applied in other people's tests either.

Let me know if you need more information to answer this. I'll check it out and pass it along.

gangssun
 
Posts: 4
Joined: Fri Apr 07, 2023 2:15 am

Fri Apr 07, 2023 10:04 am

Hi gangssun,

Thanks for your feedback.

You can try the following code.if you have other questions, please consult again.

Sincerely,
Ella
E-iceblue support team

Code: Select all
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chart.js and D3.js with Modern CSS</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Chart.js and D3.js Example with Modern CSS</h1>
  <svg width="500" height="500"></svg>
  <canvas id="myChart"></canvas>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
  <script>
    var svg = d3.select("svg");
    var circle = svg.append("circle")
            .attr("cx", 250)
            .attr("cy", 250)
            .attr("r", 50)
            .attr("fill", "red");

    d3.interval(function() {
      circle.transition()
              .duration(1000)
              .attr("cx", Math.random()*500)
              .attr("cy", Math.random()*500);
    }, 2000);
  </script>
</div>
<script type="module">
  import Chart from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.esm';
  import * as d3 from 'https://cdn.skypack.dev/[email protected]';
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    }
  });
  var svg = d3.select("body")
          .append("svg")
          .attr("width", 400)
          .attr("height", 200);
  svg.append("rect")
          .attr("x", 10)
          .attr("y", 10)
          .attr("width", 50)
          .attr("height", 50)
          .attr("fill", "red");
</script>
</body>
</html>
User avatar

Ella.Zhang
 
Posts: 42
Joined: Fri Apr 07, 2023 7:42 am

Fri Apr 07, 2023 10:27 am

Thanks so much for the code.
I see that there are two ways to convert: via URL and by providing HTML as a string to convert to PDF, but can I ask if both of them are valid for applying java script?

gangssun
 
Posts: 4
Joined: Fri Apr 07, 2023 2:15 am

Mon Apr 10, 2023 2:00 am

And we tried pdf conversion with the html you provided to test the same.
But it hasn't been charted, can you help me in this area?
Here's the code we used.

public class ConvertHtmlStringToPdf {

public static void main(String[] args) throws IOException {

//Invoke the custom method HtmlToString() to convert HTML file to string
String htmlString = HtmlToString("C:\\Users\\NetBeansProjects\\mavenproject1\\src\\main\\resources\\templates\\test.html");
//The test.html is the same as the chart.js and d3.js example you provided

//Specify the output file path
String outputFile = "output/HtmlToPdf.pdf";

//Specify the plugin path
String pluginPath = "C:\\Users\\plugins";

//Set the plugin path
HtmlConverter.setPluginPath(pluginPath);

//Convert the HTML string to PDF
HtmlConverter.convert(htmlString, outputFile, true, 100000, new Size(700, 900), new PdfMargins(0), LoadHtmlType.Source_Code);
}

//Convert a HTML file to string
public static String HtmlToString(String filePath) throws IOException {
String path = filePath;
File file = new File(path);
FileReader fileReader = new FileReader(file);
BufferedReader bufferedReader = new BufferedReader(fileReader);
StringBuilder stringBuilder = new StringBuilder();
String temp = "";
while ((temp = bufferedReader.readLine()) != null) {
stringBuilder.append(temp + "\n");
}
bufferedReader.close();
String str = stringBuilder.toString();
return str;
}
}

Is there any other way to convert it or is there a wrong part of the code?

gangssun
 
Posts: 4
Joined: Fri Apr 07, 2023 2:15 am

Mon Apr 10, 2023 2:34 am

Hi gangssun,

Thanks for your feedback,It's the same way.

For applying java script, we are relying on the QT plugin to convert HTML to PDF, but the QT plugin triggers the conversion based on the loaded event. In other words, you need to ensure that the java script content is loaded before the Loaded event fires. Ensure that the java script content is loaded before the Loaded event is triggered.

I used your code to test the function of introducing d3.js and converting html to pdf. No problems have been found for the time being. The following is my test code and results, you can have a look.

Sincerely,
Ella
E-iceblue support team
User avatar

Ella.Zhang
 
Posts: 42
Joined: Fri Apr 07, 2023 7:42 am

Tue Apr 11, 2023 4:01 am

Hi gangssun,

Have you tested the code I provided? Do the results meet your expectations? If you have any questions, please feel free to contact us. We'd be happy to help you.

Sincerely,
Ella
E-iceblue support team
User avatar

Ella.Zhang
 
Posts: 42
Joined: Fri Apr 07, 2023 7:42 am

Return to Spire.PDF