我正在使用該react-pdf/renderer軟體包添加從我的網站下載 pdf 的功能。但我收到此錯誤訊息：./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
我嘗試使用此軟體包的不同版本，例如 v2.2.0、v2.3.0 和 v3.0.0，但不幸的是，對我沒有任何幫助。我正在使用react v^17.0.2.
PDF檔案代碼：
import { Document, Page, StyleSheet, Text, View } from "@react-pdf/renderer";
import React from "react";
const styles = StyleSheet.create({
page: {
flexDirection: "row",
backgroundColor: "#E4E4E4",
},
section: {
margin: 10,
padding: 10,
flexGrow: 1,
},
});
const InvoicePDF = () => {
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
};
export default InvoicePDF;
PDF下載按鈕：
import React from "react";
import InvoicePDF from "../invoicePDF/InvoicePDF";
import { pdf } from "@react-pdf/renderer";
import { saveAs } from "file-saver";
const InvoiceFooter = ({ data }) => {
return (
<button
className="w-full text-white text-sm font-bold px-6 py-4 rounded-full transition bg-borderOne hover:bg-gray-200 hover:text-borderOne"
onClick={async () => {
const doc = <InvoicePDF />;
const asPdf = pdf([]);
asPdf.updateContainer(doc);
const blob = await asPdf.toBlob();
saveAs(blob, "document.pdf");
}}
>
Download PDF
</button>
);
};
export default InvoiceFooter;
uj5u.com熱心網友回復：
在做了很多研究之后，這個對我有用。添加：
"@react-pdf/rendered":" 2.1.0",
"@react-pdf/font": "2.2.0",
To your package.json dependencies.
然后加：
"resolutions": {
"@react-pdf/font": "2.2.0"
},
如果您已經有一個 resolutions 物件，您只需要將這個版本添加到它。請注意，版本號中沒有 ^。
然后洗掉 yarn.lock 或 package-lock.json 并重新運行 yarn/npm install
uj5u.com熱心網友回復：
"@react-pdf/renderer": 2.1.0", "@react-pdf/font": "2.2.0",
"resolutions": { "@react-pdf/font": "2.2.0" }，到你的 package.json 依賴項。
uj5u.com熱心網友回復：
我使用了“@react-pdf/renderer”：“^1.6.8”，這個版本。并且作業正常
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/504734.html
標籤：javascript 反应 pdf 反应-pdf