Expo - reduce PDF filesize on iOS devices
I have the same problem, I change my pdf creator because html creates variable size pdf and it depends on the resolution device, I use pdf-lib it works in javascript, you can create or modify pdf, I write small example in Expo , I plan to create a library to do Additional, you can fill PDF NOTE: it similar to react-native-pdf-lib but working in only enviroment javascript
My App.tsx example:
import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { Asset } from "expo-asset";
import * as Print from "expo-print";
import { degrees, PDFDocument, rgb, StandardFonts } from "pdf-lib";
export default function App({ context }: any) {
return (
<View style={styles.container}>
<Button
title="Generate PDF"
onPress={async () => {
const req = new XMLHttpRequest();
/* const templateUri = Asset.fromModule(
require("./assets/template.pdf")
);
console.log(templateUri); */
const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf' // templateUri.uri
req.open("GET", url, true);
req.responseType = "blob";
/* req.onprogress = e => (t.progress = e.loaded); */
req.onload = () => {
const blob = req.response;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = async function() {
const base64data = reader.result as string; // template pdf in base64
const pdfDoc = await PDFDocument.load(base64data);
const helveticaFont = await pdfDoc.embedFont(
StandardFonts.Helvetica
);
const pages = pdfDoc.getPages();
const firstPage = pages[0];
const { width, height } = firstPage.getSize();
console.log(width, height);
firstPage.drawText('This text was added with JavaScript!', {
x: 5,
y: height / 2 + 300,
size: 50,
font: helveticaFont,
color: rgb(0.95, 0.1, 0.1),
rotate: degrees(-45),
});
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
Print.printAsync({ uri: pdfDataUri });
};
};
req.onerror = console.error;
req.send();
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});