浏览器根据PDF路径调用文件打印

浏览器根据PDF路径调用文件打印

一般情况下都是通过 window.print()调用浏览器打印文件，但是此方法的原理是将HTML页面转为图片后打印，无法设置调整文件“适用于纸张大小操作”。

解决思路一：在新页面预览PDF，调用打印。

// 根据pdf路径生成的 Blob
        function getPdfBlob(pdfUrl) {
          return new Promise((resolve, reject) => {
            fetch(pdfUrl)
                .then(response => response.blob())
                .then(blob => resolve(blob))
                .catch(error => reject(error));
          });
        }

// 新页面预览pdf调用打印
        function printByWindow(url){
          // 在新标签页中打开 PDF
          const printWindow = window.open(url);
          if (printWindow) {
            printWindow.onload = function() {
              // 等待 PDF 加载完毕后再打印
              printWindow.print();
            };
          }
        }

解决思路二：新建一个隐藏的iframe，加载PDF，调用打印。

// 根据pdf路径生成的 Blob
        function getPdfBlob(pdfUrl) {
          return new Promise((resolve, reject) => {
            fetch(pdfUrl)
                .then(response => response.blob())
                .then(blob => resolve(blob))
                .catch(error => reject(error));
          });
        }

// 新建iframe调用打印
        function printByIframe(blobUrl){
          // 创建一个隐藏的 iframe
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none'; // 隐藏 iframe
          iframe.src = blobUrl; // 设置 iframe 的 src 为 Blob URL

          // 将 iframe 添加到页面中
          document.body.appendChild(iframe);

          // 等待 iframe 加载完成（可能需要处理跨域问题）
          iframe.onload = function() {
            // 在这里，我们假设 PDF 已经在 iframe 中加载完成
            // 注意：PDF 的加载时间取决于 PDF 的大小和网络速度
            try {
              // 触发 iframe 的打印功能
              iframe.contentWindow.print();
            } catch (e) {
              console.error('Error printing PDF:', e);
            }
          };
        }

结果：