How html2pdf generate pdf without media query css? - css

Question

I'm making a RWD table, and using html2pdf to generate pdf file.
And I using media query to change small screen style like:
#media screen and (max-width: 480px) { /*small screen style*/ }
Is there a way can I genetate pdf by small screen, but without media query css?
Please tell me if you have better solution. Thanks!

Answer 1

I thinl i figure it out.
use a specific class for media query than remove it!
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>