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

Question

%¶

.

。

我读到，将字体嵌入到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标准字体之一是“符号”（没有三角形！）。我尝试使用“Þ”来为三角形的一个字节替代，请参阅下面的结果。

Answer 1

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>