如何去除Bootstrap模态框转JPEG图片时的滚动条

The scrollbar appearing in your generated JPEG is almost certainly tied to Bootstrap’s .table-responsive class. This class adds overflow-x: auto to handle tables that are too wide for their container. Even if you don’t see the scrollbar on your live page, dom-to-image renders the element in an isolated context—this can cause the container width to be calculated differently, triggering the scrollbar in the captured image.

Here are a few targeted fixes to resolve this:

1. Temporarily Disable Overflow During Capture #

This approach modifies the element’s style only while the image is being generated, so your page’s normal behavior stays intact:

$(document).on("click", "#jpgfrmt", function() {
  // Grab the table-responsive element inside your download container
  const tableContainer = document.querySelector('#download .table-responsive');
  // Save the original overflow value to revert later
  const originalOverflow = tableContainer.style.overflow;
  
  // Hide overflow temporarily
  tableContainer.style.overflow = 'hidden';

  domtoimage.toJpeg(document.getElementById('download'), { quality: 0.95 })
    .then(function(dataUrl) {
      var link = document.createElement('a');
      link.download = 'astDetails.jpeg';
      link.href = dataUrl;
      link.click();
      // Revert back to original overflow setting
      tableContainer.style.overflow = originalOverflow;
    })
    .catch(function(error) {
      console.error('Error generating image:', error);
      // Always revert even if something goes wrong
      tableContainer.style.overflow = originalOverflow;
    });
});

2. Override Bootstrap’s Table Responsive Style for the Capture Container #

If you want a permanent CSS fix (without modifying the JS), add these styles to ensure the download container doesn’t show scrollbars:

#download {
  background: #fff;
  color: #000;
  width: auto;
  height: auto;
  overflow: hidden; /* Prevent any overflow in the parent container */
}

#download .table-responsive {
  overflow-x: hidden; /* Override Bootstrap's overflow-x:auto for this specific table */
}

3. Force the Capture to Use the Element’s Actual Width #

Sometimes dom-to-image uses a narrower width than the element displays on the page. You can explicitly set the capture width to match the element’s current offset width:

$(document).on("click", "#jpgfrmt", function() {
  const downloadElement = document.getElementById('download');
  
  domtoimage.toJpeg(downloadElement, { 
    quality: 0.95,
    width: downloadElement.offsetWidth // Use the exact width from the live page
  })
    .then(function(dataUrl) {
      var link = document.createElement('a');
      link.download = 'astDetails.jpeg';
      link.href = dataUrl;
      link.click();
    })
    .catch(function(error) {
      console.error('Error generating image:', error);
    });
});

Pick the solution that best fits your workflow—option 1 is ideal if you want to preserve the responsive table behavior on your page while fixing the image capture issue.

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