先看浏览器打印代码，创建一个iframe，专业

<body>
	<div id="container">
		<p>这是一个段落</p>
		<h1 id="title">这是一个标题</h1>
	</div>
	<input type="button" value="打印此页面" onclick="printpage()" />
	<script>
		const printpage = () => {
            const printContent = document.querySelector('#container').innerHTML;
            const iframe = document.createElement('iframe');
            iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;');
            document.body.appendChild(iframe);
            const iframeDoc = iframe.contentWindow.document;
            // 设置打印展示方式 - 横向展示
            iframeDoc.write('<style media="print">@page {size: landscape;}</style>');
            // 写入内容
            iframeDoc.write('<div>' + printContent + '</div>');
            setTimeout(function(){
                iframe.contentWindow?.print();
                document.body.removeChild(iframe);
            }, 50);
        }
	</script>
</body>

Blob URL

Blob URL是blob协议的URL，它的格式如下：

blob:http://XXX

Blob URL可以通过 URL.createObjectURL(blob) 创建。在绝大部分场景下，我们可以像使用Http协议的URL一样，使用Blob URL。

<body>
	<div id="container">
		<p>这是一个段落</p>
		<h1 id="title">这是一个标题</h1>
	</div>
	<input type="button" value="打印此页面" onclick="printpage()" />
	<script>
		const printpage = () => {
            const printContent = document.querySelector('#container').innerHTML;
            const iframe = document.createElement('iframe');
            iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;');
   
            iframe.onload = function (evnt) {
                if (evnt.target.src) {
                  evnt.target.contentWindow.print();
                }
            };
            
            if (!iframe.parentNode) {
              document.body.appendChild(iframe);
            }
            const content = createHtmlPage(printContent);
            const blob = getExportBlobByContent(content);

            iframe.src = URL.createObjectURL(blob);
            
        }
        function createHtmlPage(content) {
    
          return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', '</head>', "<body>".concat(content), "</body>", '</html>'].join('');
        }
        function getExportBlobByContent(content) {
        
           if (window.Blob) {
                return new Blob([content], {
                  type: "text/html"
                });
            }
          return null;
        }
	</script>
</body>

浏览器打印图片 (浏览器打印局部页面)

Blob URL