PDFexport error - how to cleanup html

Hello,

I searched hours to use export my form to PDF. It seems that when there is some elements like < br >, < p >< /p >, &nbsp, ... in my html (fields from an other SharePoint list). I get an error (see below). I can remove these tags, but I need a linefeed … Ik hope you can give me a solution!

Thank you,

Daniël

8.913d0269850fe91fabb7.js:1
Uncaught TypeError: t.matches is not a function
at Pn (8.913d0269850fe91fabb7.js:1)
at On (8.913d0269850fe91fabb7.js:1)
at g (8.913d0269850fe91fabb7.js:1)
at x (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)
at t (8.913d0269850fe91fabb7.js:1)

window.plumsail_forms_webpackJsonp4

i found that it's only on a double br

Hello @danieljr,

What do you mean by double br?

Do you still need assistance with export to PDF?

Hello @mnikitina,

Double br = 2 line breaks in the html code (< br >< br >)

Yes please, I hope you can help me. It's for an important project and it's driving my crazy.

I still get "Uncaught TypeError: t.matches is not a function ..." I can find some usefull information about this error or why I still get it on some html-code. Only when I remove these parts, I can export to PDF.

Thank you,

Daniël

When I remove and replace some elements I can get a pdf. But it's not perfect, because I cant have bullets and numbers in my lists …

				//cleanup html
				$('.ExportBlock').html($('.ExportBlock').html().replace(/&nbsp;/gi, ' '));
				$('.ExportBlock').html($('.ExportBlock').html().replace(/\u200B/g,' '));
				$('.ExportBlock').html($('.ExportBlock').html().replace(/<br>&nbsp;<br>/g, '<br>'));
				$('.ExportBlock').html($('.ExportBlock').html().replace(/<br> <br>/g, '<br>'));
				$('.ExportBlock').html($('.ExportBlock').html().replace(/<br><br>/g, '<br>'));
				$('.ExportBlock').find("*").removeClass();
				$('.blok1 div').removeAttr("class")
				$('.ExportBlock').html($('.ExportBlock').html().replace(/class=""/g, ''));
				$('.ExportBlock').html($('.ExportBlock').html().replace(/<hr><hr>/g, '<span class="page-break">-----</span>'));
				$('li').remove();
				$('ul').remove();
				$('ol').remove();
				$('h1 br').remove();
				$('h2 br').remove();
				$('h3 br').remove();
				$('h4 br').remove();

@danieljr,

Could you please also share the screenshot of the form so I could have a full picture.

Thank you!

HTML_form_to_PDF_NOT_working.txt (75.0 KB) HTML_form_to_PDF_working.txt (68.8 KB)

Hello Nikitina,

In my previous reply you find the piece html code from my form with the problems (and a cleaned example). the problem is still that I can't use lists

Thank you,

Daniël

				//cleanup
				$('.ExportBlok').html($('.ExportBlok').html().replace(/&nbsp;/gi, ' '));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/\u200B/g,' '));
				
				$('.ExportBlok').html($('.ExportBlok').html().replace(/\>\s+\</g,'><')); //replace whitespace between > <

				$('.ExportBlok').html($('.ExportBlok').html().replace(/<br><br>/g, '<br>'));
				
				$('.ExportBlok').find("*").removeClass();
				$('.blok1 div').removeAttr("class");
				$('.ExportBlok').html($('.ExportBlok').html().replace(/class=""/g, ''));
				
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<hr><hr>/g, '<span class="page-break">-----</span>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<strong><\/strong>/g, ''));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<span><\/span>/g, ''));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<h1><\/h1>/g, ''));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/cellspacing="0"/g, ''));
				
				$('li br').remove();
				$('ul br').remove();
				$('ol br').remove();
				
				
				$('.ExportBlok').html($('.ExportBlok').html().replace(/style="list-style-type:decimal;"/g, ''));
				
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<\/li><li>/g, '</span><br><span class="tab">• '));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<\/li>/g, '</span><br>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<li>/g, '<span class="tab">• '));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<\/li>/g, '</span><br>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<ul>/g, '<p>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<ol>/g, '<p>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<\/ol>/g, '</p>'));
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<\/ul>/g, '</p>'));	
				
				$('.ExportBlok').html($('.ExportBlok').html().replace(/<p><\/p>/g, '<br>'));				
				
				$('h1 br').remove();
				$('h2 br').remove();
				$('h3 br').remove();
				$('h4 br').remove();

@danieljr,

Thank you for the HTML code. I've tested both versions of the code in my form and exported PDF version of the form with no errors.

How do you paste the HTML code in a form? What controls and containers do you use?

Also, please make sure that you are using the latest app version of the app package. You can check it in the console (F12) >> Source. The latest version is 1.0.7. If the latest version not installed, please follow the instructions on how to Update the app package.
image

Also please check the Plumsail desktop version, it can be found in the bottom right of the program. The latest version is 1.5.1. Please also upgrade it.
image

Thank you for the test & info.

I have upgraded the webpart, but unfortunately it still doesn't work. Even if I only use an HTML control with the html code in, I get the error message …

I don't understand why it works for you and not in my form. Do you have any other solutions of suggestions?

Example:

This is working:

	<div>
		<br>
	</div>

This not (Is generated this way by my form):

	<div>
		<br>
	        <div>
		       <br>
	       </div>
	</div>

=> Uncaught TypeError: t.matches is not a function

@danieljr,

I couldn't reproduce the issue on my side.

Do you have any code or CSS in the form?

Do you get this error on a different list? Please check if you get this error in a different site collection.