我正在制作一个RWD表,并使用html 2 pdf生成pdf文件。我使用媒体查询来改变小屏幕风格,如:@media screen and (max-width: 480px) { /*small screen style*/ }有没有办法可以在小屏幕上生成pdf,而不用媒体查询css?如果你有更好的解决方案,请告诉我。谢谢!
@media screen and (max-width: 480px) { /*small screen style*/ }
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>
1条答案
按热度按时间goqiplq21#
我想我弄明白了。使用一个特定的类进行媒体查询,而不是删除它! https://codepen.io/junjunfan/pen/LYBobgd