Question

我希望有人可以帮助我。我正在使用printThis.js打印文档。我有bootstrap.min.css位于公用文件夹中。问题是，我无法正常工作。我已经尝试了可能的答案，但是没有用。

这是我在“ barcode.blade.php”处的代码。我想要做的就是这个。

loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}"

工作。谢谢！

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="{{ asset('Admin/plugins/datatables/dataTables.bootstrap.css') }}">
<link rel="stylesheet" href="{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
  <style>
    .row{
      margin: 50px;
    } 
    p{
      margin-top: 10px;
    }

  </style>

<meta charset="utf-8"/>
  <title></title>
</head>
<body>

  <div class="container">
     <div class="row">
         @foreach($barcodes as $barcode)
             <div class="col-md-4">
                 <img src="data:image/png;base64,{{DNS1D::getBarcodePNG($barcode->pxbarcode, 'C128A')}}"  />
                 <p>{{$barcode->pxbarcode}}</p>      
             </div>
         @endforeach
     </div>           
  </div>

  <div class="w3-right footer">
    <button id="print" class="w3-button w3-blue">Print</button>
    <a href="{{url('admin/home')}}" class="btn btn-primary">Back</a>
  </div>

  <script src="{{ asset('Admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
  <script src="{{ asset('js/printThis.js')}}"></script>

  <script>
    $('#print').click(function(){
      $('.container').printThis({
          debug: false,               // show the iframe for debugging
          importCSS: true,            // import parent page css
          importStyle: false,         // import style tags
          printContainer: true,       // print outer container/$.selector
          loadCSS: "{{ asset('Admin/bower_components/bootstrap/dist/css/bootstrap.min.css') }}",                // path to additional css file - use an array [] for multiple
          pageTitle: "",              // add title to print page
          removeInline: false,        // remove inline styles from print elements
          removeInlineSelector: "*",  // custom selectors to filter inline styles. removeInline must be true
          printDelay: 333,            // variable print delay
          header: "<h2>Print Barcode</h2>",               // prefix to html
          footer: null,               // postfix to html
          base: false,                // preserve the BASE tag or accept a string for the URL
          formValues: true,           // preserve input/form values
          canvas: false,              // copy canvas content
          doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup
          removeScripts: false,       // remove script tags from print content
          copyTagClasses: false,      // copy classes from the html & body tag
          beforePrintEvent: null,     // callback function for printEvent in iframe
          beforePrint: null,          // function called before iframe is filled
          afterPrint: null            // function called before iframe is removed
      });
    })
  </script>
</body>
</html>

This is how it looks when i click the print button.

如您所见，我在刀片中使用了引导程序，并且在打印时它没有生效。

Answer 1

只是那样导入您的引导程序

<link href="URL to bootstrap.min.css" rel="stylesheet" media='all'/>

然后调用printThis：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="{{ asset('assets/js/printThis.js') }}"></script>
<script type="text/javascript">
    var j = jQuery.noConflict(true);
    $("#printBtn").click(function () {
        j('#divToPrint').printThis({
            importCSS: true,
            loadCSS: true,
            canvas: true
        });
    })
</script>

它对我来说效果很好...（顺便说一句：我正在使用symfony 4和树枝作为模板引擎）

Answer 2

var options = {
    loadCSS: "css/bootstrap.min.css"
}
$('#printButton').on('click', function () {
    $('.container').printThis(options);
});

或

$('#printButton').on('click', function () {
    $('.container').printThis({
        loadCSS: "css/bootstrap.min.css"
    });
});

我无法在printThis.js中使用bootstrap.min.css

2 个答案: