fix for pdf formatting and hyperlinks

This commit is contained in:
2026-03-09 13:11:28 +00:00
parent 95c1492fe0
commit 96e180040d
4 changed files with 241 additions and 221 deletions
+105 -106
View File
@@ -5,7 +5,7 @@ import {
StyleSheet,
Text,
View,
Font,
Font
} from "@react-pdf/renderer";
import Html from "react-pdf-html";
import { getFormCollectionByID, bytesToSize } from "../../components/utils";
@@ -27,16 +27,16 @@ const styles = StyleSheet.create({
backgroundColor: "white",
padding: 20,
fontSize: 16,
paddingBottom: 50,
paddingBottom: 50
},
header: {
fontSize: 25,
fontFamily: "Helvetica",
flexDirection: "row",
justifyContent: "space-between",
justifyContent: "space-between"
},
subHeader: {
fontSize: 20,
fontSize: 20
},
logoImage: { width: "200pt" },
questionBullet: { width: "5%", fontSize: 12 },
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
backgroundColor: "white"
},
questionAnswerSmall: {
color: "#757575",
@@ -63,7 +63,7 @@ const styles = StyleSheet.create({
paddingLeft: 10,
paddingRight: 10,
backgroundColor: "white",
marginRight: 10,
marginRight: 10
},
questionAnswerSmaller: {
color: "#757575",
@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
backgroundColor: "white"
},
questionAnswerMid: {
color: "#757575",
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
backgroundColor: "white"
},
questionAnswerWide: {
color: "#757575",
@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
border: 1,
borderColor: "#eee",
backgroundColor: "white",
padding: 5,
padding: 5
},
questionAnswerFull: {
@@ -102,13 +102,13 @@ const styles = StyleSheet.create({
padding: 5,
border: 1,
borderColor: "#eee",
backgroundColor: "white",
backgroundColor: "white"
},
sectionContainer: {
backgroundColor: "#F8F8F8",
padding: 10,
marginTop: 20,
fontSize: 15,
fontSize: 15
},
pageNumber: {
position: "absolute",
@@ -117,13 +117,13 @@ const styles = StyleSheet.create({
left: 0,
right: 0,
textAlign: "center",
color: "grey",
color: "grey"
},
richArea: {
fontSize: 12,
flexDirection: "column",
},
flexDirection: "column"
}
});
export const lpaQuestionnaire_pdf = ({ docProps }) => {
@@ -145,16 +145,15 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
Font.registerHyphenationCallback((word) => [word]);
function CleanHTML(htmlStr) {
let cleanStr =
typeof htmlStr === "string"
? htmlStr.replace(
/<p><br><\/p>|<p class=\"ql-align-justify\"><br><\/p>/g,
""
)
: "";
function CleanHTML(html = "") {
if (typeof html !== "string") return "";
return cleanStr;
return html
.replace(/&nbsp;/gi, " ")
.replace(/<(p|div)([^>]*)>\s*(<br\s*\/?>)?\s*<\/\1>/gi, "")
.replace(/<p([^>]*)>\s*<\/p>/gi, "")
.replace(/(<br\s*\/?>\s*){3,}/gi, "<br /><br />")
.trim();
}
return (
@@ -166,7 +165,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<Text
style={{
width: "60%",
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
{getTrans(
@@ -180,7 +179,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
width: "60%",
fontSize: 15,
marginTop: 20,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
{getTrans(
@@ -205,7 +204,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -220,7 +219,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>1.</Text>
@@ -238,7 +237,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>2.</Text>
@@ -256,7 +255,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>3.</Text>
@@ -274,7 +273,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>4.</Text>
@@ -294,7 +293,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -308,7 +307,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
@@ -316,7 +315,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -347,7 +346,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>6.</Text>
@@ -365,14 +364,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -404,14 +403,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -442,14 +441,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -478,14 +477,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -511,7 +510,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -525,7 +524,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
@@ -533,7 +532,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -555,14 +554,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -584,13 +583,13 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -613,7 +612,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>14.</Text>
@@ -634,7 +633,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -649,7 +648,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>15.</Text>
@@ -666,14 +665,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -700,14 +699,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -736,14 +735,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -772,14 +771,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -806,14 +805,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -842,14 +841,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -879,7 +878,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>22.</Text>
@@ -896,14 +895,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -936,7 +935,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -951,7 +950,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>24.</Text>
@@ -966,7 +965,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}></Text>
@@ -985,14 +984,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}></Text>
@@ -1023,7 +1022,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}></Text>
@@ -1041,7 +1040,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}></Text>
@@ -1058,14 +1057,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1098,7 +1097,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
wrap={false}
>
@@ -1113,14 +1112,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1151,14 +1150,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1189,14 +1188,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1229,14 +1228,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1263,14 +1262,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1302,14 +1301,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1338,14 +1337,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1374,14 +1373,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
// wrap={false}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionBullet}>
@@ -1413,7 +1412,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text>
@@ -1429,14 +1428,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
alignItems: "center"
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
alignItems: "center"
}}
>
<Text
@@ -1459,7 +1458,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
border: 1,
borderColor: "#eee",
backgroundColor: "white",
paddingRight: 10,
paddingRight: 10
}}
wrap={true}
>
@@ -1470,7 +1469,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
alignItems: "center"
}}
>
<Text
@@ -1480,7 +1479,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
? "60"
: "40",
fontSize: 12,
marginLeft: 10,
marginLeft: 10
}}
>
{getTrans(
@@ -1498,7 +1497,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
alignItems: "center"
}}
>
<Text style={{ width: "18%", fontSize: 12 }}>
@@ -1516,7 +1515,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
fontFamily: "Helvetica-Bold"
}}
>
<Text style={{ fontSize: 14 }}>
@@ -1531,14 +1530,14 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
wrap={false}
style={{
flexDirection: "column",
marginBottom: 10,
marginBottom: 10
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
marginBottom: 10
}}
>
<Text style={styles.questionTextWide}>
@@ -1551,7 +1550,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
<View
style={[
styles.questionAnswerFull,
{ flexDirection: "column" },
{ flexDirection: "column" }
]}
>
{values.hasOwnProperty("filesList") &&
@@ -1562,7 +1561,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
style={{
flexDirection:
"row",
marginBottom: 4,
marginBottom: 4
}}
>
<Text
@@ -1614,7 +1613,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
borderColor: "#eee",
padding: 20,
paddingTop: 30,
height: "100%",
height: "100%"
}}
></View>
</Page>