DataTables > Buttons > PDF > Include images on export

gk-dt-buttons-PDF-images.js

document.addEventListener('DOMContentLoaded', function() {
	wp.hooks.addFilter( 'gk.datatables.options', 'dt-custom-code', function ( options ) {
		options.buttons = options.buttons.map( button => {
			if ( button.extend !== 'pdf' ) {
				return button;
			}

			button.action = function ( e, dt, button, config ) {
				const promises = [];
	
				dt.rows( { search: 'applied' } ).every( function () {
					jQuery( this.node() ).find( 'img' ).each( function () {
						const imageElement = this;
	
						const promise = fetch( imageElement.src )
							.then( response => response.blob() )
							.then( blob => new Promise( resolve => {
								const reader = new FileReader();

								reader.onload = () => {
									imageElement.src = reader.result;

									resolve();
								};

								reader.onerror = error => {
									resolve();
								};

								reader.readAsDataURL( blob );
							} ) );
	
						promises.push( promise );
					} );
				} );
	
				Promise.all( promises ).then( () => jQuery.fn.dataTable.ext.buttons.pdfHtml5.action.call( this, e, dt, button, config ) );
			};
	
			const originalBodyFunction = button.exportOptions?.format?.body;
	
			button.exportOptions = button.exportOptions || {};
	
			button.exportOptions.format = button.exportOptions.format || {};
	
			button.exportOptions.format.body = function ( data, row, column, node ) {
				const images = jQuery( node ).find( 'img' );
	
				if ( images.length > 0 ) {
					const imageLinks = [];
	
					images.each( function () {
						const src = jQuery( this ).attr( 'src' );
	
						if ( src ) {
							imageLinks.push( '__LINK__' + src );
						}
					} );
	
					return imageLinks.join( '||' );
				}
	
				return originalBodyFunction ? originalBodyFunction( data, row, column, node ) : data;
			};
	
			button.customize = function ( doc ) {
				doc.content.forEach( item => {
					if ( !item.table ) {
						return;
					}
	
					item.table.body.forEach( row => {
						row.forEach( cell => {
							if ( typeof cell.text !== 'string' || !cell.text.includes( '__LINK__' ) ) {
								return;
							}
								
							const imageLinks = cell.text.split( '||' );

							cell.text = undefined;
							cell.stack = [];

							imageLinks.forEach( link => {
								const imgData = link.match( /__LINK__(data:image\/[^;]+;base64,[^\"]+)/ );

								if ( imgData && imgData[ 1 ] ) {
									cell.stack.push( {
										image: imgData[ 1 ],
										width: 100,
									} );
								}
							} );
						} );
					} );
				} );
			};
		
			return button;
		} );
		
		return options;
	} );
});