HTML通过JSPDF到PF,▶角色被损坏

问题描述 投票:0回答:1

.

我读到,将字体嵌入到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">[&gt;]</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>
在这里html2canvas出于某些奇怪的原因给出了CORS错误
    
我尝试了DataUri图标并旋转一些常见符号,以免添加更多的字体。
效果很好。但是,知道PDF标准字体之一是“符号”(没有三角形!)。我尝试使用“Þ”来为三角形的一个字节替代,请参阅下面的结果。

javascript html unicode fonts html2canvas
1个回答
0
投票

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">[&gt;]</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>

	
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.