I cant select text after conversion from html to pdf

[Emmanuel Tweneboah]

i have followed the instructions on the page to convert an html page to pdf, but afterwards i cant select texts in the pdf generated for annotations.

Any Help?

Attachment: 1328196207929896762_78e8d6a7.zip

[Gowthamraj Kumar]

Hi Emmanuel, 

Thank you for contacting Syncfusion support.

 

We have checked the reported issue with HTML to PDF conversion on our end, but it is working properly and we can able to select the text from the converted PDF document. We have selected and copy the text from provided PDF document in Adobe viewer. Please refer the below screenshot,  

 

We request you to share more details of your exact requirement/issue such as complete code snippet, sample, issue screenshot, product version, control for selecting the PDF text details to reproduce the issue on our end. So, that it will be helpful for us to analyze and assist you further on this. 

 

Regards, 

Gowthamraj K 

[Emmanuel Tweneboah]

Thanks  Gowthamraj K  for the reply,

i can as well copy text and select them with adobe viewer but i cant do same syncfusion pdf viewer.

I'm  using 

Syncfusion.HtmlToPdfConverter.QtWebKit.Net.Cores version (19.3.0.54)

Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows  (19.3.0.54)

Attachment: new_7_fa43c6a6.zip

[Gowthamraj Kumar]

Hi Emmanuel,

Thank you for your update

We were able to reproduce the reported issue with converted PDF document using WebKit rendering engine in our Syncfusion PdfViewer tool. We have forwarded the reported issue “Unable to select the texts with the provided PDF document” to corresponding team, they are validating on this and we will update the further details on November 26^th 2021. 

 

Regards, 

Gowthamraj K  

[Emmanuel Tweneboah]

Hi Gowthamraj,

Thanks for the feedback, i will be waiting.

Regards,

Emmanuel.

[Dhivyabharathi Mohan]

Hi Emmanuel, 

 

 

We checked the provided PDF document and the text has been present inside the XObject element. Currently, we don’t have support to retrieve the bounds object present inside the XObject element in the .NET Core framework.  So, the text is not selectable in the PDF Viewer. We have logged this as a feature and the feature implementation will be included in any of our upcoming weekly releases. You can track the status using the below feedback link, 

 

 

https://www.syncfusion.com/feedback/30618/extract-line-bounds-of-the-text-present-inside-the-xobject-element  

 

And Syncfusion HTML to PDF Converter have different rendering engines for converting Html to PDF document. We are suggested you try our new Blink based HTML converter to achieve your requirements and we can be able to select the text from converted PDF document in PdfViewer tool. Blink converter internally make use of chromium executable in headless mode for converting HTML to PDF.    

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HtmlCore_(2)-1556064380 

  

 

 

PDF document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlinkPDF608906641  

  

 

Kindly refer below link for more information about our Blink converter.     

    

Blink: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink      

        

KB: https://www.syncfusion.com/kb/10377/how-to-convert-html-to-pdf-with-blink-using-c-and-vb-net 

 

         

UG: https://help.syncfusion.com/file-formats/pdf/converting-html-to-pdf-in-windows-forms#steps-to-convert-a-html-to-pdf-document-using-blink-in-window-forms 

        

 

Prerequisites: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#prerequisites-for-windows    

 

 

 

Please try the above suggestion and let us know if you need any further assistance with this. 

 

 

Regards, 

Dhivya. 

[Emmanuel Tweneboah]

Hi  Dhivya,

Thanks for the response, i tried the  Blink converter.

It works with the text selection and annotations as i wanted but it does not render the forms as it is.

it ignores the divisions of the rows, i have attached saample of the page rendered with WebKit and the page rendered with Blink.

Is there something i'm missing?

WebKit Render

Blink Render

Attachment: 1328197988455840442_92dad557.zip

[Gowthamraj Kumar]

Hi Emmanuel, 

 

Thank you for your update.

The reported rendering issue may occurs only in particular HTML file. Blink converter internally make use of chromium executable in headless mode for converting HTML to PDF. The HTML to PDF converter will preserve the output PDF document, like how the HTML file is displayed on web browser/print preview options. So, kindly share us more details such as complete HTML file (with all resources such as script, styles, etc), complete code snippet or modified sample, platform etc., to check this issue in our side, it will be helpful for us to analyse and assist you further on this. 

 

Regards, 

Gowthamraj K 

[Emmanuel Tweneboah]

@using Syncfusion.EJ2

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>-eLibrary</title>

    <!-- Google Font: Source Sans Pro -->

    <link rel="stylesheet" rel='nofollow' href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

    <!-- Font Awesome -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/fontawesome-free/css/all.min.css">

    <!-- daterange picker -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/daterangepicker/daterangepicker.css">

    <!-- iCheck for checkboxes and radio inputs -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

    <!-- Bootstrap Color Picker -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">

    <!-- Tempusdominus Bootstrap 4 -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">

    <!-- Select2 -->

    <script src="~/plugins/select2/js/select2.full.min.js"></script>

    <link rel="stylesheet" rel='nofollow' href="~/plugins/select2/css/select2.min.css">

    <link rel='nofollow' href="~/plugins/select2-bootstrap4-theme/select2-bootstrap4.css" rel="stylesheet" />

    <!-- Bootstrap4 Duallistbox -->

    <link rel="stylesheet" rel='nofollow' href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" rel='nofollow' href="~/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">

    <!-- DataTable style -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">

    <link rel="stylesheet" rel='nofollow' href="~/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">

    <link rel="stylesheet" rel='nofollow' href="~/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">

    <!-- BS Stepper -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/bs-stepper/css/bs-stepper.min.css">

    <!-- dropzonejs -->

    <link rel="stylesheet" rel='nofollow' href="~/plugins/dropzone/min/dropzone.min.css">

    <!-- Theme style -->

    <link rel="stylesheet" rel='nofollow' href="~/dist/css/adminlte.min.css">

</head>

<body>

    <div class="card-header">

        Document

    </div>

    <div class="card-body scrollCard">

        <div class="row">

            <div class="col-md-4">

                <input class="form-control form-control-sm" type="text" placehoder="enter name" />

            </div>

            <div class="col-md-4">

                <input class="form-control form-control-sm" type="text" placehoder="enter name" />

            </div>

            <div class="col-md-4">

                <input class="form-control form-control-sm" type="text" placehoder="enter name" />

            </div>

        </div>

    </div>

    <script src="~/plugins/jquery/jquery.min.js"></script>

    <!-- Bootstrap 4 -->

    <script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Select2 -->

    <script src="~/plugins/select2/js/select2.full.min.js"></script>

    <!-- Bootstrap4 Duallistbox -->

    <script src="~/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

    <!-- InputMask -->

    <script src="~/plugins/moment/moment.min.js"></script>

    <script src="~/plugins/inputmask/jquery.inputmask.min.js"></script>

    <!-- date-range-picker -->

    <script src="~/plugins/daterangepicker/daterangepicker.js"></script>

    <!-- bootstrap color picker -->

    <script src="~/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

    <!-- Tempusdominus Bootstrap 4 -->

    <script src="~/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>

    <!-- Bootstrap Switch -->

    <script src="~/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>

    <!-- BS-Stepper -->

    <script src="~/plugins/bs-stepper/js/bs-stepper.min.js"></script>

    <!-- dropzonejs -->

    <script src="~/plugins/dropzone/min/dropzone.min.js"></script>

    <script src="~/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>

    <!-- AdminLTE App -->

    <script src="~/dist/js/adminlte.min.js"></script>

    <script src="~/plugins/toastr/toastr.min.js"></script>

    <!-- bs-custom-file-input -->

    <!-- AdminLTE for demo purposes -->

    <script src="~/dist/js/demo.js"></script>

    <!-- Page specific script -->

    <!-- DataTables & Plugins -->

    <script src="~/plugins/datatables/jquery.dataTables.min.js"></script>

    <script src="~/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>

    <script src="~/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>

    <script src="~/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

    <script src="~/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>

    <script src="~/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>

    <script src="~/plugins/jszip/jszip.min.js"></script>

    <script src="~/plugins/pdfmake/pdfmake.min.js"></script>

    <script src="~/plugins/pdfmake/vfs_fonts.js"></script>

    <script src="~/plugins/datatables-buttons/js/buttons.html5.min.js"></script>

    <script src="~/plugins/datatables-buttons/js/buttons.print.min.js"></script>

    <script src="~/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

</body>

</html>

Attachment: 1328265690373526612_22ab6ccd.zip

[Gowthamraj Kumar]

Hi Emmanuel, 

 

Thank you for your update.

 

We have checked the conversion with provided HTML code, but its render the content as like viewed in chrome web browser. In the provided HTML code, some of the external (styles, scripts) files are missing, so that the reported behaviour occurs. The HTML to PDF converter will preserve the output PDF document, like how the HTML file is displayed on web browser/print preview options. You can check the behaviour from chrome print preview, we have attached the screenshot view of chrome browser. Please ensure the provided html string in your web browser to check the behaviour,

 

 

When converting HTML string to PDF, we have to specify the base URL (path of the resources) to load the external images/scripts/styles used in the HTML string. So, that the browser/converter can access the resources such as styles, images, and scripts from the provided base URL. We have attached the sample and output document for your reference, please try the conversion with all external resources file to get the expected result, 

Sample: https://www.syncfusion.com/downloads/support/forum/170600/ze/HtmlCore230796105 

Please find the external CSS resources files are referred in your html content,

 

 

Please refer the below link for more information, 

UG: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#html-string-to-pdf 

If still you are facing an issue, we request you to share the complete HTML file (with all resources such as script, styles, etc), complete code snippet or modified sample, platform etc., to check this issue in our side, it will be helpful for us to analyses and assist you further on this. 

Regards, 

Gowthamraj K