MarcosSantosDev/printHtml.ts

## printHtml.ts
type PrintHtmlParams = {
  /**
   * `containerId`:
   * - Index of the element where the content to be printed will be assembled
   */
  containerId: string;
  /**
   * `elementHtml`:
   * - Content to be printed
   */
  elementHtml: string;
};

export const printHtml = ({ containerId, elementHtml }: PrintHtmlParams) => {
  const containerIFrame = document.getElementById(containerId);

  if (containerIFrame) {
    const tagIframe = document.createElement('iframe');

    tagIframe.style.position = 'fixed';
    tagIframe.style.right = '0';
    tagIframe.style.bottom = '0';
    tagIframe.style.width = '0';
    tagIframe.style.height = '0';
    tagIframe.style.border = '0';

    containerIFrame.appendChild(tagIframe);

    if (tagIframe.contentWindow) {
      const removeChildElements = () => {
        containerIFrame.removeChild(tagIframe);
      };

      tagIframe.contentWindow.onbeforeunload = removeChildElements;
      tagIframe.contentWindow.onafterprint = removeChildElements;

      tagIframe.contentWindow.document.write(
        `
          <!DOCTYPE html>
          <html lang="pt-BR">
            <head>
              <style type="text/css" media="print">
                @page {
                  size: auto; /* auto is the initial value */
                  margin: 0; /* this affects the margin in the printer settings */
                }

                body
                {
                  border: none;
                  margin: 8mm;
                }
              </style>
            </head>
            <body>${elementHtml}</body>
          </html>
          `,
      );

      tagIframe.contentWindow.focus();
      tagIframe.contentWindow.print();
    }
  }
};
	type PrintHtmlParams = {
	/**
	* `containerId`:
	* - Index of the element where the content to be printed will be assembled
	*/
	containerId: string;
	/**
	* `elementHtml`:
	* - Content to be printed
	*/
	elementHtml: string;
	};

	export const printHtml = ({ containerId, elementHtml }: PrintHtmlParams) => {
	const containerIFrame = document.getElementById(containerId);

	if (containerIFrame) {
	const tagIframe = document.createElement('iframe');

	tagIframe.style.position = 'fixed';
	tagIframe.style.right = '0';
	tagIframe.style.bottom = '0';
	tagIframe.style.width = '0';
	tagIframe.style.height = '0';
	tagIframe.style.border = '0';

	containerIFrame.appendChild(tagIframe);

	if (tagIframe.contentWindow) {
	const removeChildElements = () => {
	containerIFrame.removeChild(tagIframe);
	};

	tagIframe.contentWindow.onbeforeunload = removeChildElements;
	tagIframe.contentWindow.onafterprint = removeChildElements;

	tagIframe.contentWindow.document.write(
	`
	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<style type="text/css" media="print">
	@page {
	size: auto; /* auto is the initial value */
	margin: 0; /* this affects the margin in the printer settings */
	}

	body
	{
	border: none;
	margin: 8mm;
	}
	</style>
	</head>
	<body>${elementHtml}</body>
	</html>
	`,
	);

	tagIframe.contentWindow.focus();
	tagIframe.contentWindow.print();
	}
	}
	};