本教程详细介绍了如何使用javascript将网页中的特定html元素（如收据）打印到pdf或纸张。通过将目标元素的html内容封装为data uri并在新窗口中打开，结合内联javascript触发自动打印，实现了一种高效且用户友好的局部内容打印解决方案，避免了复杂的内容隐藏与恢复操作。

在构建复杂的网页应用时，经常会遇到需要打印页面特定区域内容的需求，例如电商网站的订单收据、报告或证书。传统的做法可能涉及通过JavaScript动态隐藏或显示页面元素，但这通常会导致页面闪烁或复杂的DOM操作。本教程将介绍一种更为优雅且自动化的方法，利用Data URI和内联JavaScript实现特定元素的打印功能。

核心原理概述

本方案的核心在于以下几个关键技术点：

1. Data URI (数据统一资源标识符)：Data URI 允许我们将小型文件直接嵌入到HTML、CSS或JavaScript中，而无需外部链接。在这里，我们将待打印的HTML内容编码成一个Data URI，浏览器可以将其作为一个独立的HTML页面进行渲染。
2. window.print() 方法：这是浏览器内置的打印功能，调用它会弹出操作系统的打印对话框，允许用户选择打印机或保存为PDF。
3. 内联 JavaScript：为了实现自动打印，我们将在Data URI所承载的HTML内容中嵌入一段JavaScript代码，使其在新页面加载完成后自动调用 window.print()。
4. 动态样式注入：为了确保打印内容的最佳呈现，我们可以在打印前动态注入额外的CSS样式，例如居中布局。

HTML 结构准备

首先，需要将你希望打印的特定内容（例如收据表格）封装在一个独立的容器元素中。这样做有助于JavaScript精确地获取其HTML内容。同时，为了打印时的样式一致性，建议将与该内容相关的CSS样式直接嵌入到该容器内部或其子元素中，以确保在新打开的打印页面中样式能够正确应用。

以下是一个收据表格的HTML结构示例，它被包裹在一个 section 标签内，并且其样式直接嵌入在表格中：

    

      
      

        
#
        
Item Description
        
Unit Price
        
Qty
        
Price
      
      

        
1
        
Dummy Item1
        
200$
        
1
        
200$
      
      

        
2
        
Dummy Item2
        
75$
        
1
        
75$
      
      

        
3
        
Dummy Item3
        
100$
        
2
        
200$
      
      

        
Total
        

        

        

        
475$
      
    

JavaScript 实现步骤

接下来是实现打印功能的JavaScript代码。我们将创建一个函数，该函数在被调用时执行以下操作：

1. 获取目标内容并注入打印逻辑 首先，获取包含收据的 table 元素。然后，向其内部动态注入一个

   function printReceipt() {
     const receiptTable = document.querySelector('.receipt');
     // 动态注入用于打印居中的CSS样式，这里通过修改已有的style标签实现
     // 注意：这里假设receiptTable内部有一个
   
   
   
       
   网页特定元素打印示例
       打印收据
   
       
           这是页面上的其他内容，不应被打印。
           
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
       
   
       
   
           
   
             
             
   
               
   #
               
   Item Description
               
   Unit Price
               
   Qty
               
   Price
             
             
   
               
   1
               
   Dummy Item1
               
   200$
               
   1
               
   200$
             
             
   
               
   2
               
   Dummy Item2
               
   75$
               
   1
               
   75$
             
             
   
               
   3
               
   Dummy Item3
               
   100$
               
   2
               
   200$
             
             
   
               
   Total
               
   
               
   
               
   
               
   475$
             
           
       
   
       中执行
               const cssCenteringScript = `
                   const styleTag = document.createElement('style');
                   styleTag.innerHTML = '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 80%; width: auto; }';
                   document.head.appendChild(styleTag);
               `;
   
               // 保存原始HTML，以便在注入后可以恢复
               const originalReceiptTableHTML = receiptTable.innerHTML;
   
               // 注入自动打印的脚本到收据表格内容中
               // 这个脚本会在新打开的Data URI页面中执行
               receiptTable.innerHTML += ``;
   
               const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML;
               const dataUri = 'data:text/html,' + encodeURIComponent(receiptSectionHTML);
   
               window.open(dataUri, '_blank'); // 在新标签页中打开并触发打印
   
               // 恢复原始HTML，移除注入的脚本，避免影响当前页面的DOM
               // 这一步在window.open之后立即执行，不会影响新打开的Data URI页面
               receiptTable.innerHTML = originalReceiptTableHTML; 
           }
   
           const button = document.querySelector('.printButton');
           button.addEventListener('click', printReceipt);
       
   
   
   

   注意事项与优化

   1. 浏览器兼容性：window.open() 和 data: URI 在现代浏览器中普遍支持，但某些浏览器可能会有对Data URI长度的限制。对于非常大的HTML内容，这种方法可能不适用。

   2. 安全性：使用 window.open() 打开 data: URI 通常被认为是安全的，因为内容是本地生成的。然而，如果Data URI的内容来自不可信的第三方，则可能存在跨站脚本（XSS）风险。在本例中，内容来自当前页面DOM，因此风险较低。

   3. 打印样式控制 (@media print)：对于更专业的打印布局，推荐使用CSS的 @media print 媒体查询。通过定义专门的打印样式表，可以精确控制打印时的页面布局、字体大小、隐藏非打印元素等，而无需JavaScript的动态注入。例如：

      /* style.css */
      /* 默认屏幕样式 */
      .receipt-section { display: block; }
      .print-button { display: block; }
      
      @media print {
          /* 打印时隐藏所有非收据内容 */
          body > *:not(.receipt-section) {
              display: none;
          }
          /* 让收据居中 */
          .receipt-section {
              width: 100%;
              margin: auto;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
          }
          /* 确保收据表格宽度占满 */
          .receipt {
              width: 100%;
              max-width: none; /* 移除屏幕样式中的最大宽度限制 */
          }
      }

      然后，JavaScript只需调用 window.print() 即可，无需构建Data URI和注入脚本。这种方法通常更健壮和易于维护。本教程介绍的方法是应对特定场景（如需要完全隔离打印内容）的一种灵活变通方案。

   4. 用户体验：window.open() 可能会被浏览器的弹窗拦截器阻止，尤其是在用户没有明确交互（如点击按钮）的情况下。确保用户行为触发此函数可以避免此问题。

   总结

   通过将特定HTML内容封装为Data URI，并巧妙地利用内联JavaScript在新页面加载时触发 window.print()，我们可以实现一种高效且用户友好的局部内容打印解决方案。虽然这种方法在某些方面可能略显“非传统”，但它提供了一种无需复杂DOM操作即可实现局部打印的有效途径。在实际项目中，开发者应根据具体需求权衡其与更标准的 @media print 方案的优劣，选择最适合的实现方式。

   
   # app  # html  # 编码  # 操作系统  # win  # 打印机  # javascript  # java  # 浏览器  # pdf  # css  # css样式 

   
   相关栏目： 【 行业资讯 】 【 网络运营 】 【 GEO优化 】 【 营销推广 】 【 SEO优化 】 【 技术教程 】 【 代码知识 】 【 AI推广 】

   
   相关推荐： 如何使用Golang管理跨项目依赖_Golang多模块项目依赖实践  Win10怎样卸载自带Edge_Win10卸载Edge浏览器步骤【教程】  Python函数接口文档化_自动化说明【指导】  windows系统如何安装cab更新补丁_windows手动安装更新包教程  Win11怎么设置默认PDF阅读器 Win11修改PDF打开方式【步骤】  Python性能剖析高级教程_cProfileLineProfiler优化案例解析  Win11此电脑不在桌面上_Windows 11桌面图标设置找回【步骤】  Python变量绑定机制_引用模型解析【教程】  如何在Golang中优化文件读写性能_使用缓冲和并发处理  Win11笔记本怎么看电池健康度_Win11电池报告生成命令【详解】  c++如何使用std::bind绑定函数参数_c++ 占位符std::placeholders使用【详解】  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  Win10系统怎么查看网络连接状态_Windows10网络和共享中心  如何在 Go 中正确反序列化 XML 多节点数组（解决仅解析首个元素的问题）  如何使用Golang安装API文档生成工具_快速生成接口文档  Win11怎么设置声音输出设备_Windows11音量合成器单独调节应用  如何使用Golang defer优化性能_减少不必要的函数调用  c++怎么操作redis数据库_c++ hiredis库连接与命令执行【实战】  Win11怎么设置闹钟_Windows 11时钟应用闹钟设置指南【详解】  Python并发安全问题_资源竞争说明【指导】  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Windows 10怎么隐藏特定更新补丁_Windows 10使用微软官方工具wushowhide.diagcab  Win11怎么设置开机问候语_自定义Win11锁屏提示信息【技巧】  如何在 Go 项目开发中正确处理本地包导入与远程模块路径的一致性问题  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  Windows10如何重置此电脑_Windows10电脑重置方法【步骤】  PythonDocker高级项目部署教程_多容器管理与CI/CD流水线  c++怎么设置线程优先级与cpu亲和性_c++ 多核处理器性能绑定【指南】  php订单日志权限怎么设_php订单日志文件权限设置技巧【技巧】  如何使用Golang实现聊天室消息存档_存储聊天记录到文件  php串口通信波特率怎么选_根据硬件手册设置正确波特率【方法】  Win11怎么查看显卡显存_查询Win11显卡详细参数方法【步骤】  Win11怎么设置开机自动连接宽带_Windows11创建拨号连接计划任务  Win11怎么解压RAR文件 Win11自带解压功能使用方法  Win11怎么关闭通知中心_Windows11系统通知与专注助手设置  php打包exe后无法写入文件_权限问题解决方法【教程】  Win11如何设置自动关机 Win11定时关机命令使用教程【技巧】  如何在 Go 中判断变量是否为函数类型  如何正确访问 Laravel 模型或对象的属性而非调用不存在的方法  mac怎么安装字体_MAC添加第三方字体与字体册管理【教程】  Win11如何卸载OneDrive_Win11卸载OneDrive方法【教程】  Win10如何更改网络连接_Windows10以太网属性IP配置  如何关闭Win10自动更新更新_Win10系统自动更新双重关闭技巧  Go 中实现 Python urllib.quote() 功能的等效方法  如何在Golang中写入JSON文件_保存结构体数据到文件  如何使用Golang读取日志文件_Golang bufio Scanner日志处理示例  MAC如何安装Git版本控制工具_MAC开发环境配置与Xcode插件安装【教程】  PHP 中 require() 语句返回值的用法详解  Python网络日志追踪_请求定位解析【教程】  Windows10如何查看蓝屏日志_Win10使用事件查看器分析Dump文件