%¶
.
。我读到,将字体嵌入到JSPDF中会解决它,但也许对我来说太复杂了,或者也许我不正确理解。
我怎么能实现这一目标?无论我尝试过什么,我都无法弄清楚如何正确显示它。代码自我相当简单。任何帮助将不胜感激。
const {
jsPDF
} = window.jspdf;
let darkModeFlag = true;
async function getOutputDivClone() {
return document.getElementById("output").cloneNode(true)
}
async function exportPDF() {
const outputDiv = await getOutputDivClone();
const wrapBoth = document.createElement('div');
wrapBoth.style.backgroundColor = darkModeFlag ? '#1E1E1E' : '#FFFFFF';
outputDiv.style.backgroundColor = darkModeFlag ? '#1E1E1E' : '#FFFFFF';
wrapBoth.appendChild(outputDiv);
document.body.appendChild(wrapBoth);
const contentWidth = wrapBoth.offsetWidth;
const contentHeight = wrapBoth.offsetHeight;
let doc = new jsPDF({
orientation: contentWidth > contentHeight ? 'l' : 'p',
unit: 'px',
format: [contentWidth, contentHeight]
});
await new Promise(resolve => {
doc.html(wrapBoth, {
callback: resolve,
x: 0,
y: 0,
margin: [0, 0, 0, 0],
html2canvas: {
scale: 1,
logging: false,
allowTaint: false,
useCORS: true
}
});
});
wrapBoth.remove();
if (doc.internal.getNumberOfPages() > 1) {
for (let i = doc.internal.getNumberOfPages(); i > 1; i--) {
doc.deletePage(i);
}
}
doc.save(`test.pdf`);
}
document.addEventListener('DOMContentLoaded', async () => {
await exportPDF()
alert("done")
})
objinsp-summary {
cursor: pointer;
color: #d4d4d4;
}
summary {
list-style: none;
-webkit-appearance: none;
appearance: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::marker {
display: none;
}
details>summary::before {
content: "▶";
display: inline-block;
margin-right: 5px;
transition: transform 0.2s;
}
details[open]>summary::before {
transform: rotate(90deg);
}
<div id="output" tabindex="0">
<div class="outputContent dark-log" style="margin-left: 4px;">
<div class="flexContainer">
<div class="dontAllowSelect symbolDiv">[>]</div>
<div class="outputItem">
<details data-loaded="true" open="" style="margin-right: 15px;">
<summary class="objinsp objinsp-summary"><span class="objinsp objinsp-highlight-type">{}</span>
</summary>
<div class="objinsp-node">
<details data-loaded="true" open="">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">log: ƒ log()</span></summary>
<div class="objinsp-node">
<div>
<div class="objinsp"><span class="objinsp-highlight-key"> length: </span><span
class="objinsp objinsp-highlight-number">0</span></div>
</div>
<div>
<div class="objinsp"><span class="objinsp-highlight-key"> name: </span><span
class="objinsp objinsp-highlight-string">"log"</span></div>
</div>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">[[Prototype]]: ƒ
anonymous()</span></summary>
</details>
</div>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">error: ƒ error()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">warn: ƒ warn()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">info: ƒ info()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">debug: ƒ debug()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">clear: ƒ clear()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">table: ƒ table()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">count: ƒ count()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">countReset: ƒ countReset()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">assert: ƒ assert()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">dir: ƒ dir()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">dirxml: ƒ dirxml()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeStamp: ƒ timeStamp()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">trace: ƒ trace()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">group: ƒ group()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">groupCollapsed: ƒ groupCollapsed()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">groupEnd: ƒ groupEnd()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">profile: ƒ profile()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">profileEnd: ƒ profileEnd()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">time: ƒ time()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeEnd: ƒ timeEnd()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeLog: ƒ timeLog()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">[[Prototype]]: Object</span></summary>
</details>
</div>
</details>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
objinsp-summary {
cursor: pointer;
color: #d4d4d4;
}
summary {
list-style: none;
-webkit-appearance: none;
appearance: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::marker {
display: none;
}
details>summary::before {
font-family: "Symbol", Symbol, symbol;
content: "Þ";
display: inline-block;
margin-right: 5px;
transition: transform 0.2s;
}
details[open]>summary::before {
content: "ß"
}
<div id="output" tabindex="0">
<div class="outputContent dark-log" style="margin-left: 4px;">
<div class="flexContainer">
<div class="dontAllowSelect symbolDiv">[>]</div>
<div class="outputItem">
<details data-loaded="true" open="" style="margin-right: 15px;">
<summary class="objinsp objinsp-summary"><span class="objinsp objinsp-highlight-type">{}</span>
</summary>
<div class="objinsp-node">
<details data-loaded="true" open="">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">log: ƒ log()</span></summary>
<div class="objinsp-node">
<div>
<div class="objinsp"><span class="objinsp-highlight-key"> length: </span><span
class="objinsp objinsp-highlight-number">0</span></div>
</div>
<div>
<div class="objinsp"><span class="objinsp-highlight-key"> name: </span><span
class="objinsp objinsp-highlight-string">"log"</span></div>
</div>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">[[Prototype]]: ƒ
anonymous()</span></summary>
</details>
</div>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">error: ƒ error()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">warn: ƒ warn()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">info: ƒ info()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">debug: ƒ debug()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">clear: ƒ clear()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">table: ƒ table()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">count: ƒ count()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">countReset: ƒ countReset()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">assert: ƒ assert()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">dir: ƒ dir()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">dirxml: ƒ dirxml()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeStamp: ƒ timeStamp()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">trace: ƒ trace()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">group: ƒ group()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">groupCollapsed: ƒ groupCollapsed()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">groupEnd: ƒ groupEnd()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">profile: ƒ profile()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">profileEnd: ƒ profileEnd()</span>
</summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">time: ƒ time()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeEnd: ƒ timeEnd()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">timeLog: ƒ timeLog()</span></summary>
</details>
<details data-loaded="false">
<summary class="objinsp objinsp-summary"><span
class="objinsp objinsp-highlight-type">[[Prototype]]: Object</span></summary>
</details>
</div>
</details>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>