من تجربه‌ای در نوشتن پلاگین در جاوااسکریپت ندارم. باز میگم غیر اصولی بخشی از این کار رو کردم و جواب هم میده ولی همین که یه خورده کدها زیاد میشه روند از دستم در میره. شما بگید واسه این کار باید از فریمورک‌هایی مانند vue استفاده کنم یا اونها کارشوم یه چیز دیگه است.
کاری که من انجام میدم اینجوریه که جاوا اسکریپت سوال‌ها رو یکی یکی توی div جدیدی به نام page قرار میده و هر وقت از ارتفاع page که در body مشخص شده زد بیرون page جدیدی ایجاد می‌کنه و همین کار رو ادامه میده. کد جاوا اسکریپت باید اندازه صفحه و نوع سربرگ رو به عنوان آپشن داشته باشه و چیزهای دیگه.
شما بگید چجوری باید اصولی کدش رو بنویسم.
در نهایت می خوام با chrome headless تبدیل به pdf اش کنم.
<!DOCTYPE html><html lang="fa"><meta charset="utf-8">
<head> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script> <script type="text/javascript"> MathJax.Hub.Queue(function() {
var nodes = document.querySelectorAll('#questions *') var i; for (i = 0; i < nodes.length; i++) { if (nodes[i].children.length == 0) { var txt = nodes[i].innerText; if (txt) { nodes[i].innerText = txt.toFaDigit(); } } }
decimals = document.querySelectorAll(".MJXc-TeX-main-R, .point"); var i; for (i = 0; i < decimals.length; i++) { decimals[i].innerHTML = decimals[i].innerHTML.replace(/\./g, "٫"); }
questions = document.querySelectorAll(".question-group"); var i; for (i = 0; i < questions.length; i++) { var numQues = document.createElement("div"); numQues.className = "number"; numQues.innerHTML = (i + 1).toString().toFaDigit(); questions[i].insertBefore(numQues, questions[i].firstChild); } mathtext = document.querySelectorAll('.mjx-char'); var i; for(i = 0; i < mathtext.length; i++) { mathtext[i].innerText = mathtext[i].innerText; }
renderForWeb(); });
window.matchMedia("print").addListener(function(e) { if (e.matches) { console.log("the view port is print"); renderForPrint(); } });
// window.matchMedia("screen").addListener(function(e) { // if (e.matches) { // console.log("the view port is screen"); // render(); // } // });
</script> <script type="text/javascript"> String.prototype.toFaDigit = function() { return this.replace(/\d+/g, function(digit) { var ret = ''; for (var i = 0, len = digit.length; i < len; i++) { ret += String.fromCharCode(digit.charCodeAt(i) + 1728); } return ret; }); };
function renderForWeb() { var questionsDiv = document.getElementById("questions"); var questions = document.querySelectorAll(".question-group");
var totalPage = 0; var curPage = 0; var body = document.getElementsByTagName("BODY")[0]; var tmpPage = document.createElement("div"); tmpPage.className = "tmp-page"; body.appendChild(tmpPage);
var refPage = document.createElement("div"); refPage.className = "page"; body.appendChild(refPage);
var i; for (i = 0; i < questions.length; i++) { var question = questions[i]; quesCopy = question.cloneNode(true); tmpPage.appendChild(quesCopy); if (tmpPage.offsetHeight > refPage.offsetHeight) { quesCopy.remove();
curPage += 1; totalPage += 1; var page = document.createElement("div"); page.id = "page-w-" + curPage; page.className = "page"; body.appendChild(page); page.innerHTML = tmpPage.innerHTML;
tmpPage.innerHTML = ""; refPage.innerHTML = "";
tmpPage.appendChild(question) } else { question.remove(); } } curPage += 1; totalPage += 1; var page = document.createElement("div"); page.id = "page-w-" + curPage; page.className = "page"; body.appendChild(page); page.innerHTML = tmpPage.innerHTML;
tmpPage.remove(); refPage.remove();
if (questionsDiv) { questionsDiv.remove(); } }
function renderForPrint() { var questionsDiv = document.getElementById("questions"); var questions = document.querySelectorAll(".question-group");
var totalPage = 0; var curPage = 0; var body = document.getElementsByTagName("BODY")[0]; var tmpPage = document.createElement("div"); tmpPage.className = "tmp-page"; body.appendChild(tmpPage);
var refPage = document.createElement("div"); refPage.className = "page"; body.appendChild(refPage);
var i; for (i = 0; i < questions.length; i++) { var question = questions[i]; quesCopy = question.cloneNode(true); tmpPage.appendChild(quesCopy); if (tmpPage.offsetHeight > refPage.offsetHeight) { quesCopy.remove();
curPage += 1; totalPage += 1; var page = document.createElement("div"); page.id = "page-p-" + curPage; page.className = "page"; body.appendChild(page); page.innerHTML = tmpPage.innerHTML;
tmpPage.innerHTML = ""; refPage.innerHTML = "";
tmpPage.appendChild(question) } else { question.remove(); } } curPage += 1; totalPage += 1; var page = document.createElement("div"); page.id = "page-p-" + curPage; page.className = "page"; body.appendChild(page); page.innerHTML = tmpPage.innerHTML;
tmpPage.remove(); refPage.remove();
wPages = document.querySelectorAll("[id^='page-w']"); for (i = 0; i < wPages.length; i++) { wPages[i].remove(); } }
</script> <style> * { margin: 0; padding: 0; }
@media print { @page { margin: 0; size: 148mm 210.5mm; } }
@media screen { .page { margin: .25cm 0; } }
body { background: gray; direction: rtl; line-height: 1.5; font-family: 'XB Zar', Yas, Arial; width: 148mm; margin: 0 auto; font-size: 10pt; }
.page { height: 210mm;/* width: 210mm;*/ background: white; padding: 5mm; box-sizing: border-box; }
.tmp-page { padding: 5mm; }
.questions { height: 210mm;/* width: 210mm;*/ background: white; padding: 5mm; box-sizing: border-box; }
.question-group { position: relative; border: solid .5mm black; border-radius: .2cm; margin-bottom: 2pt; padding: .5em; text-align: justify; }
.question-group:last-child { margin-bottom: 0; }
.question-group .number, .question-group .point { position: absolute; top: -8pt; padding: 1pt; background: white; border: solid black .5pt; border-radius: 2pt; text-align: center; line-height: 1; }
.question-group .number { right: .5cm; }
.question-group .point { left: .5cm; }
.answer { color: blue; display: inline; }
.MJXc-TeX-main-R { font-family: MJXc-TeX-main-R, MJXc-TeX-main-Rw, Yas !important; }
.shfarasat { display: flex; line-height: 2; background: white; font-weight: bold; }
.shfarasat>div>div { width: 33.333333%; float: right; }
.shfarasat>div {/* background: radial-gradient(blue, transparent);*/ overflow: hidden; margin: 0 5mm; width: 100%; padding: 2pt; border: solid 1pt black; } .shfarasat .center { text-align: center; font-size: small; line-height: 1.8; } .shfarasat .center img { width: 1.8cm; } .shfarasat .shadow-box { border: solid 1pt black; border-radius: 3pt; box-shadow: 2pt 2pt gray; margin-bottom: 5pt; } .shfarasat .shadow-box:last-child { margin-bottom: 0pt; } .shfarasat .date { display: flex; } .shfarasat .date-a { border: none; text-align: left; width: 100%; font-size: inherit; font-family: inherit; font-weight: inherit; } .shfarasat .date-q { flex: 0 0 25%; } </style></head>
<body> <template> <div class=" header shfarasat"> <div> <div> <div class="shadow-box date"><span class="date-q">تاریخ</span><input type="text" class="date-a" value="۹۸/۷/۱۲"></div> <div class="shadow-box"> نام</div> <div class="shadow-box">نام خانوادگی</div> </div> <div class="center"> <img src="logo-farasat.jpg"> <div>اداره آموزش و پرورش لارستان</div> <div>دبیرستان نمونه شهید فراست</div> </div> <div> <div class="shadow-box">تعداد صفحات</div> <div class="shadow-box">شعبه</div> <div class="shadow-box">شماره ردیف</div> </div> </div> </div> </template> <div class="questions" id="questions"> <div class="question-group"> <div class="question" style=""> حجم شکل‌های زیر را به‌دست آورید. ($\pi=3$. در ضمن نوشتن فرمول الزامی است.) <div style="width:3cm; height: 2.1cm; float: left;"> <svg viewbox="0 -19 188.976378 132.385827"> <defs> <!-- <pattern id="grid" x="0" y="0" width="1cm" height="1cm" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="1cm" height="1cm" style="fill: #fff; stroke: #555; stroke-width: .01cm;" /> </pattern> --> <pattern id="north-east" x="0" y="0" width=".25cm" height=".25cm" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width=".25cm" height=".25cm" style="fill: #fff;" /> <line x1="0" y1=".25cm" x2=".25cm" y2="0" style="fill: #fff; stroke: #000; stroke-width: 1px;" /> </pattern> <!-- <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="8" patternTransform="rotate(-45 2 2)" > <path d="M -1,2 l 6,0" stroke="#000000" stroke-width=".5"/> </pattern> --> <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="8" height="8"> <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" style="stroke:black; stroke-width:.6" transform="scale(2)" /> </pattern> </defs> <!-- <rect x="0" y="0" width="10cm" height="10cm" style="fill: url(#grid);" /> <line x1="0" y1="5cm" x2="10cm" y2="5cm" style="stroke: black; stroke-width: .02cm;" /> <line x1="5cm" y1="0" x2="5cm" y2="10cm" style="stroke: black; stroke-width: .02cm;" /> --> <circle cx="1.5cm" cy="1.5cm" r="1.5cm" style="fill: url(#diagonalHatch); stroke: black; stroke-width: .01cm" /> <circle cx="3.5cm" cy="1.5cm" r="1.5cm" style="fill: #fff; stroke: black; stroke-width: .01cm" /> <circle cx="1.5cm" cy="1.5cm" r="1.5cm" style="fill: none; stroke: black; stroke-width: .01cm" /> <foreignObject x="1.1cm" y="-.5cm" width=".5cm" height=".5cm"> <span>$A$</span> </foreignObject> <foreignObject x="3.1cm" y="-.5cm" width=".5cm" height=".5cm"> <span>$B$</span> </foreignObject> </svg> </div> <div style="clear: both;"></div> </div> <div class="point">1.5</div> </div> <div class="question-group"> <div class="question"> تاسی را پرتاب می‌کنیم. <div class="parts-2"> <div> احتمال این‌که عددی اول بیاید چقدر است؟ <div class="answer"> $\text{احتمال}=\dfrac{ \text{تعداد حالات مطلوب}} {\text{تعداد حالات ممکن}}= \dfrac{3}{6}$ </div> </div> <div>احتمال این‌که شمارنده 10 بیاید چقدر است؟</div> </div> </div> <div class="point">1.75</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=x^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1.25</div> </div> <div class="question-group"> <div class="point">0.75</div> <div class="question"> مجموعه‌ی زیر را با اعضا نشان دهید. <div style="float: left; direction: ltr;"> $\Big\{x^2\big|\,x\in \mathbb{Z}, 0\lt x \le 2\Big\}=$ <span class="answer">$\Big\{0, 1, 4\Big\}$</span> </div> <div style="clear: both;"></div> </div> </div> <div class="question-group"> <div class="point">0.75</div> <div class="question"> بلندترین قله‌ی جهان چه نام دارند؟ <div class="answer">اورست</div> </div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> <div class="point">1</div> </div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div> <div class="question-group"> <div class="question"> بهترین چای ایرانی $a^2+b^2=c^2$ چیست؟ <div class="answer"> عبارت‌های $2.5a$ و $4b$ متشابه هستند. لابد تا به حال این سوال برای شما $\dfrac{5}{3}$ پیش آمده که بهترین چای ایرانی کدام است و چای‌های مختلف مثل سرگل، ممتاز، قلم و شکسته چه تفاوتی با یکدیگر دارند؟ اگر تا انتهای مقاله با ما همراه باشید، با انواع مختلف چای ایرانی آشنا شده و خوش‌طعم و خوش‌عطر ترین چای متناسب با سلیقه خود را انتخاب خواهید کرد. </div> </div> <div class="point">1</div> </div>
</div></body>
</html>
خودتون کد بالا رو با کروم باز کنید و نتیجه رو نگاه کنید