Pdf生成、啟用文本換行和禁用斷詞

在表格中生成pdf檔案時。是否可以設定啟用文本換行但禁用斷詞？因為現在它包裝了單詞并添加了連字符。我希望整個單詞在沒有換行的情況下給新行。如何設定？

這個CSS有效：

flexWrap: wrap, // wrap text

某些 css 屬性無法應用：

overflowWrap: "break-word",  // Object literal may only specify known properties, and 'overflowWrap' does not exist in type 'Style'.
wordBreak: "normal",  // Object literal may only specify known properties, and 'wordBreak' does not exist in type 'Style'.
whiteSpace: "wrap",  // Object literal may only specify known properties, and 'whiteSpace' does not exist in type 'Style'.

我使用 reactjs 17.0.2、react-pdf/renderer 3.0.1、types/react-pdf 5.7.2。

代碼：

<Page size="A4" orientation="landscape" style={styles.page}>
  <View style={styles.tableContainer}>
    {/* -- Table Head: -- */}
    <View style={styles.head}>
      <Text style={{ ...styles.headCol,     width: "8%" }}>{"State"}</Text>
      <Text style={{ ...styles.headColLast, width: "24%" }}>{"Subject"}</Text> */}
    </View>
    {/* -- Table Body: -- */}
      <View key={index} style={styles.row}>
        <Text style={{ ...styles.rowCol,     width: "8%" }}>Ok</Text>
        <Text style={{ ...styles.rowColLast, width: "24%" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
      </View>
  </View>
</Page>

// style:
const borderColor = "#90e5fc"
const paddingTopText = 3;
const paddingLeftText = 2;
const paddingRightText = 2;
const paddingBottomText = 2;
const rowHeight = 80;

Styles = {
  page: {
    fontFamily: "OpenSans",
    fontSize: "9px",
    lineHeight: 1.3,
    flexDirection: "column",
    paddingTop: 30,
    paddingLeft: 30,
    paddingRight: 30
  },
  tableContainer: {
    flexDirection: "row",
    flexWrap: "wrap", // nowrap
    marginTop: 24,
    borderColor: borderColor,
    borderWidth: 2
  },
head: {
    flexDirection: "row",
    borderBottomColor: borderColor,
    borderBottomWidth: 1,
    height: "auto",
    textAlign: "left",
    fontWeight: "bold",
    flexGrow: 1,
    margin: 0,
    padding: 0
  },
  headCol: {
    borderRightColor: borderColor,
    borderRightWidth: 1,
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
  headColLast: {
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
    row: {
    flexDirection: "row",
    borderBottomColor: borderColor,
    borderBottomWidth: 1,
    height: rowHeight,
    margin: 0,
    padding: 0
  },
  rowCol: {
    textAlign: "left",
    borderRightColor: borderColor,
    borderRightWidth: 1,
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: paddingBottomText
  },
  rowColLast: {
    textAlign: "left",
    paddingTop: paddingTopText,
    paddingLeft: paddingLeftText,
    paddingRight: paddingRightText,
    paddingBottom: 0
  },
}

uj5u.com熱心網友回復：

以下解決方案有效。它不換行，也不添加連字符“-”。也許有人會有所幫助。

export const chunkSubstr = (str, size) => {
  const numChunks = Math.ceil(str.length / size);
  const chunks = new Array(numChunks);

  for (let i = 0, o = 0; i < numChunks;   i, o  = size) {
    chunks[i] = str.substr(o, size);
  }

  return chunks;
};

Font.registerHyphenationCallback((word) => {
  if (word.length > 16) {
    return chunkSubstr(word, 14);
  } else {
    return [word];
  }
});

標籤：css反应pdfpdf生成反应-pdf

上一篇：從在Python中自動生成PDF的鏈接下載PDF

下一篇：PDFLib如何列印名稱值對？