如何生成没有媒体查询css的pdf文件?

j1dl9f46  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(93)

我正在制作一个RWD表,并使用html 2 pdf生成pdf文件。我使用媒体查询来改变小屏幕风格,如:
@media screen and (max-width: 480px) { /*small screen style*/ }
有没有办法可以在小屏幕上生成pdf,而不用媒体查询css?如果你有更好的解决方案,请告诉我。谢谢!

goqiplq2

goqiplq21#

我想我弄明白了。使用一个特定的类进行媒体查询,而不是删除它! https://codepen.io/junjunfan/pen/LYBobgd

function generatePDF() {
  const rootNode = document.querySelector("#print_content")
  const opt = {
    // margin: 10,
    filename: 'mypdf.pdf',
    jsPDF: { format: 'b4', orientation: 'portrait' },
    html2canvas:  { 
      scale: 4,
      useCORS: true,
      height: 1200,
    }
  }
  $(".container").removeClass("mqcss");
   

  const element = rootNode;

  html2pdf()
    .set(opt)
    .from(element)
    .save();
}

document.getElementById('exportPDF').addEventListener('click', generatePDF);
 $(".container").addClass("mqcss");
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  position: relative;
}

.container {
  background-color: #eee;
  position: relative;
  width: 80%;
  max-width: 800px;
  height: 80vh;
  margin: 0 auto;
}
.container p {
  font-size: 50px;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .mqcss {
    background-color: red;
  }
  .mqcss p {
    font-size: 10px;
    color: #fff;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="print_content">

  <div class="container mqcss">
    <p>RWD Content</p>
  </div>

</div>
<button id="exportPDF">generate PDF</button>

相关问题