HTML到PDF格式的JavaScript（reactJS）和CSS

在我的reactJS中，我想将我的DOM和DOM的一部分转换成PDF。我想要一个可读和可选择的PDF，我不想失去我的CSS样式

我试过这个：

const input = document.getElementById('toPdf');

let doc = new jsPDF("portrait", "mm", "a4");
doc.fromHTML(input, 1, 1);
doc.save("myDocument.pdf");

那很好。其可读性、多页性和文本可选择。但是，它放松了整个造型

结果是：

有没有办法保持这种风格

我的HTML如下所示：

我用这个：

提前谢谢

更新错误：

Uncaught (in promise) ReferenceError: pdf is not defined
    at Object.callback (RaUpdateSendReportMethods.js?ea2d:54)
    at Promise.eval (jspdf.min.js?b003:118)
callback @ RaUpdateSendReportMethods.js?ea2d:54
(anonymous) @ jspdf.min.js?b003:118
Promise.then (async)
(anonymous) @ jspdf.min.js?b003:118
y.thenCore @ jspdf.min.js?b003:118
y.then @ jspdf.min.js?b003:118
y.doCallback @ jspdf.min.js?b003:118
i.html @ jspdf.min.js?b003:118
createPDF @ RaUpdateSendReportMethods.js?ea2d:51
onClick @ RaUpdateSendReport.js?3ca0:238
EnhancedButton._this.handleClick @ EnhancedButton.js?7315:138
boundFunc @ ReactErrorUtils.js?dc41:63
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js?dc41:69
executeDispatch @ EventPluginUtils.js?5d8c:83
executeDispatchesInOrder @ EventPluginUtils.js?5d8c:106
executeDispatchesAndRelease @ EventPluginHub.js?0f32:41
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js?0f32:52
forEachAccumulated @ forEachAccumulated.js?e2c3:22
processEventQueue @ EventPluginHub.js?0f32:252
runEventQueueInBatch @ ReactEventEmitterMixin.js?91f8:15
handleTopLevel @ ReactEventEmitterMixin.js?91f8:25
handleTopLevelImpl @ ReactEventListener.js?944f:70
perform @ Transaction.js?f15f:141
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:60
batchedUpdates @ ReactUpdates.js?8e6b:95
dispatchEvent @ ReactEventListener.js?944f:145
html2canvas.min.js:7 html2canvas: Preload starts: finding background-images
html2canvas.min.js:7 html2canvas.Util.Children failed with exception: Cannot read property 'document' of null
html2canvas.min.js:7 html2canvas: Preload: Finding images
html2canvas.min.js:7 html2canvas: Preload: Done.
html2canvas.min.js:7 html2canvas: start: images: 0 / 0 (failed: 0)
html2canvas.min.js:7 Finished loading images: # 0 (failed: 0)
html2canvas.min.js:7 html2canvas: Renderer: Canvas renderer done - returning canvas obj
html2canvas.min.js:8 Uncaught TypeError: Failed to execute 'drawImage' on 
'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at html2canvas.min.js:8
    at Object.u.Renderer (html2canvas.min.js:8)
    at Object.o.complete (html2canvas.min.js:8)
    at o (html2canvas.min.js:7)
    at Object.u.Preload (html2can

vas.min.js:7)
at html2canvas.min.js:8

请尝试jsPDF的.html而不是

---

看看这个例子，试试->谢谢，但是我看不出保持样式的区别在哪里。我可以传递一个特定的css文件吗？要更改显示版本中的某些内容吗？还没有，明天可以测试。。。个人电脑是家里唯一的智能手机。。。我明天早上试试，明白吗。关于更改css，您可以参考这篇文章。但这与jspdf无关，纯JavaScript。当我像上面这样做时，我会在上面添加错误现在我在promise DomeException中得到一个新错误html2canvas.min.js:6 Uncaught:未能在“Range”上执行“setEnd”：偏移量24大于节点的长度23。有什么提示吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="~/lib/html2canvas/html2canvas.min.js"></script></script>
<!-- html2canvas 1.0.0-alpha.11 up to v1.0.0-rc.1 works, current version may not work -->

<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'letter');
        pdf.html(document.getElementById('toPdf'), {
            callback: function () {
                pdf.save('myDocument.pdf');
                window.open(pdf.output('bloburl')); // To debug.
            }
        });
    }
</script>