Laravel中打印指定div内容：解决JS打印CSS丢失问题

哥们，我之前在Laravel项目里也碰到过一模一样的问题——用原生JS打印指定div结果样式全乱，后来试了几个方案都挺好用的，给你分享下：

方案一：用CSS媒体查询（最简单直接） #

这个是最不需要改动现有代码的方案，核心是利用CSS的@media print媒体查询，专门为打印场景定义样式。

1. 在你的项目CSS文件里（比如public/css/app.css或者Blade视图里的<style>标签）添加打印样式：

@media print {
  /* 先隐藏页面所有元素 */
  body * {
    visibility: hidden;
  }
  /* 只显示目标div及其所有子元素 */
  #your-target-div, #your-target-div * {
    visibility: visible;
  }
  /* 把目标div定位到页面顶部，避免打印时出现空白 */
  #your-target-div {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* 可选：隐藏打印按钮本身 */
  #print-btn {
    display: none;
  }
}

2. 原来的JS触发逻辑不用改，还是点击按钮调用window.print()：

document.getElementById('print-btn').addEventListener('click', function() {
  window.print();
});

浏览器的打印引擎会自动识别@media print里的样式，这样打印出来的内容就会保留你定义的样式了。

方案二：创建独立打印视图（样式最可控） #

如果你的打印内容样式比较复杂，或者不想和主页面样式冲突，Laravel的视图系统正好派上用场——专门做一个打印用的视图。

1. 新建打印视图：比如resources/views/print/target-content.blade.php，里面只放要打印的内容，并且引入需要的CSS（可以是专门的打印样式，也可以复用现有样式）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>打印内容</title>
  <!-- 引入样式，用asset函数生成正确路径 -->
  <link rel="stylesheet" href="{{ asset('css/print-styles.css') }}">
</head>
<body>
  <!-- 这里放你要打印的div内容，比如从控制器传过来的数据 -->
  <div id="print-content">
    {{ $content }}
    <!-- 或者直接写静态内容/Blade模板 -->
  </div>
</body>
</html>

2. 加一个路由来返回这个视图：

// routes/web.php
Route::get('/print-target', function () {
  // 如果需要动态数据，可以从请求参数获取，比如
  // $data = YourModel::find(request('id'));
  return view('print.target-content', [
    'content' => '这里是要打印的内容' // 替换成你的实际数据
  ]);
});

3. 修改按钮的JS逻辑，打开新窗口加载这个视图，然后触发打印：

document.getElementById('print-btn').addEventListener('click', function() {
  // 打开新窗口加载打印视图
  const printWindow = window.open('/print-target', '_blank');
  
  // 等窗口加载完成后触发打印，打印完自动关闭窗口
  printWindow.onload = function() {
    printWindow.print();
    printWindow.close();
  };
});

这个方案的好处是完全隔离了主页面和打印页面的样式，你可以给打印视图写专属的CSS，不用担心冲突。

方案三：用第三方库print.js（省心省力） #

如果不想自己折腾样式和视图，用专门的打印库会更省心，print.js就是个不错的选择，它能自动抓取目标元素的样式或者指定CSS文件。

1. 安装print.js：可以用npm安装，或者直接在Blade里引入CDN：

<!-- 在Blade视图的head里引入CDN -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

或者用npm：

npm install print-js --save

然后在resources/js/app.js里引入：

import printJS from 'print-js';

2. 修改按钮的JS逻辑：

document.getElementById('print-btn').addEventListener('click', function() {
  printJS({
    printable: 'your-target-div', // 要打印的div的ID
    type: 'html',
    css: '{{ asset('css/app.css') }}', // 指定要加载的CSS文件路径
    scanStyles: true // 自动扫描目标元素的内联样式和页面样式
  });
});

这个库会帮你处理样式的加载和打印区域的定位，基本不用自己写额外的CSS，适合快速实现需求。

额外小提示 #

• 测试打印时用浏览器的打印预览（Ctrl+P），不用真的打印，节省纸张还能快速调整样式。
• 如果用Tailwind CSS，默认情况下有些样式在打印时不生效，可以在tailwind.config.js里添加打印变体：

module.exports = {
  variants: {
    extend: {
      display: ['print'],
      textColor: ['print'],
      fontSize: ['print'],
      // 其他你需要的样式变体
    }
  }
}

然后在HTML里用print:block、print:text-gray-800这样的类来控制打印样式。

内容的提问来源于stack exchange，提问作者Tosca