Bootstrap滚动网站：如何将当前页面视图打印为PDF？

嘿，我来帮你搞定这个问题！你现在的代码其实只是尝试打开一个叫printed.pdf的文件，但根本没把当前屏幕的内容捕获进去对吧？这就难怪达不到你想要的效果了～

你的现有代码问题分析 #

你写的这段代码：

function printpdf() { 
  var w = window.open('printed.pdf'); 
  $(w).ready(function(){ 
    w.print(); 
  }); 
}

它只是打开了一个指定的PDF文件（如果这个文件不存在还会报错），完全没有处理当前页面的内容，更别说捕获当前屏幕的视图了。而且浏览器的安全限制可能还会阻止你直接打开本地的printed.pdf文件。

解决方案：捕获当前视图并打印为PDF #

下面给你两种可行的方案，根据你的需求选择：

方案1：复制DOM结构+保留Bootstrap样式（适合不需要像素级还原的场景） #

这个方案会把当前页面的DOM结构和样式复制到新窗口，然后调用打印功能，浏览器会让你选择保存为PDF。

function printCurrentViewAsPDF() {
  // 创建一个空白的新窗口
  const printWindow = window.open('', '_blank');
  
  // 获取当前页面的完整HTML内容（如果只想打印特定容器，可替换成document.getElementById('your-container').innerHTML）
  const pageContent = document.documentElement.outerHTML;
  
  // 给新窗口写入内容，确保引入Bootstrap CSS保持样式一致
  printWindow.document.write(`
    <html>
      <head>
        <title>打印当前视图</title>
        <!-- 引入Bootstrap CSS，路径要和你的项目保持一致 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <!-- 自定义打印样式，模拟当前屏幕的视口尺寸 -->
        <style>
          @media print {
            body {
              width: ${window.innerWidth}px;
              height: ${window.innerHeight}px;
              overflow: hidden;
              margin: 0;
              padding: 0;
            }
            <!-- 可以在这里隐藏不需要打印的元素，比如导航栏、页脚 -->
            .navbar, .site-footer {
              display: none !important;
            }
          }
        </style>
      </head>
      <body>${pageContent}</body>
    </html>
  `);
  
  // 关闭文档写入，等待内容加载完成
  printWindow.document.close();
  printWindow.onload = function() {
    // 触发打印对话框，选择"保存为PDF"即可
    printWindow.print();
    // 打印完成后自动关闭窗口
    setTimeout(() => printWindow.close(), 100);
  };
}

方案2：用html2canvas捕获像素级视图（适合需要精准还原当前屏幕的场景） #

如果你的Bootstrap页面有复杂的样式或者动态效果，想要完全还原当前屏幕的视觉效果，可以用html2canvas库把当前视口转为图片，再打印图片。

步骤1：先引入html2canvas

可以通过CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

步骤2：编写打印函数

async function printCurrentViewAsPDF() {
  // 捕获当前屏幕可见区域的内容为canvas（精准还原当前视图）
  const canvas = await html2canvas(document.body, {
    width: window.innerWidth,
    height: window.innerHeight,
    scrollX: 0,
    scrollY: window.pageYOffset // 确保捕获当前滚动位置的视图
  });
  
  // 创建新窗口并写入图片
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head>
        <title>打印当前视图</title>
        <style>
          @media print {
            body { margin: 0; padding: 0; }
            img { max-width: 100%; height: auto; }
          }
        </style>
      </head>
      <body><img src="${canvas.toDataURL()}"></body>
    </html>
  `);
  
  printWindow.document.close();
  printWindow.onload = function() {
    printWindow.print();
    setTimeout(() => printWindow.close(), 100);
  };
}

使用方法 #

把上面的函数放到你的项目里，然后给按钮添加点击事件：

<button onclick="printCurrentViewAsPDF()" class="btn btn-primary">打印当前视图为PDF</button>

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