Added Vite support and Build First Distribution

JakeKoekemoer · Apr 4, 2024 · 8475245 · 8475245
1 parent 752e375
commit 8475245
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -13,5 +13,67 @@ The library will eventually consume HTML and CSS to generate a PDF file.
 The library is still in development, but you can follow the progress on Github.
 
 ## Features
-- Convert a HTML file and watch it magically convert to PDF
+- Eventually the code will convert an HTML file and watch it magically convert to PDF
 
+## Build a distribution
+
+Lets say you forked the project and you want to build a distribution. You can run the following command to build the distribution.
+
+```bash
+npm vite build
+```
+
+## How To Use It
+
+Include the script tag in your HTML file to reference the HTML Library. Or you can write your own module to implement the library.
+Add the script tag to your project.
+
+```html
+<script src="../dist/bundle.js" type="module"></script>
+
+```
+
+Then you can use the library to generate a PDF file.
+
+```javascript
+function triggerMakeAPDF(){
+    let txtOnPDF = "Hello World!"; // I want each page to say Hello World!
+    let txtTitle = "Hello Document"; // This is what I want displayed as the document name in the tab title
+    let txtAuthor = "John Doe"; // This is the author of the document
+
+    let doc = new FuckOffPDF(txtTitle,txtAuthor);
+    let page1 = doc.NewPage();
+    page1.AddContent(txtOnPDF);
+    doc.AddPage(page1);
+
+    let page2 = doc.NewPage();
+    page2.AddContent(`Page 2: ${txtOnPDF}`);
+    doc.AddPage(page2);
+
+    let page3 = doc.NewPage();
+    page3.AddContent(`Page 3: ${txtOnPDF}`);
+    doc.AddPage(page3);
+
+    doc.MakePDFFile();
+}
+```
+
+To Implement the library in your custom solution do the following:
+
+```javascript
+import {F_OFF_PDF} from "./Classes/base.js"; // Where ./ referrs to the path of the src file.
+let handle =  new F_OFF_PDF();
+```
+
+From here you can set the document title and author
+
+```javascript
+handle.GetDoc().SetTitle(title);
+handle.GetDoc().SetAuthor(author);
+
+let page1 = handle.GetDoc().NewPage();
+page1.AddContent('Add your content here');
+handle.GetDoc().AddPage(page1);
+
+handle.GetDoc().MakePDFFile();
+```
diff --git a/dist/bundle-legacy.js b/dist/bundle-legacy.js
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package.json b/package.json
@@ -18,5 +18,10 @@
   "homepage": "https://github.com/JakeKoekemoer/F_OFF_PDF#readme",
   "dependencies": {
     "html2canvas": "^1.4.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "vite": "^5.2.8"
   }
 }
diff --git a/poc/ProofOfConcept.html b/poc/ProofOfConcept.html
@@ -6,27 +6,71 @@
 </head>
 <body>
 
-    <script src="../src/index.js" type="module"></script>
+    <script src="../dist/bundle.js" type="module"></script>
 
     <script>
-        function clickTheBtn(){
+        function triggerMakeAPDF(){
+            let txtOnPDF = document.getElementById("txtOnPDF").value;
+            let txtTitle = document.getElementById("txtPDFTitle").value;
+            let txtAuthor = document.getElementById("txtAuthor").value;
 
-            let inputText = document.getElementById("someTxt").value;
-
-            let doc = new FuckOffPDF("Testy PDFy","Some Creative Devs");
+            let doc = new FuckOffPDF(txtTitle,txtAuthor);
             let page1 = doc.NewPage();
-            page1.AddContent(`${inputText}`);
+            page1.AddContent(txtOnPDF);
             doc.AddPage(page1);
+
+            let page2 = doc.NewPage();
+            page2.AddContent(`Page 2 ${txtOnPDF}`);
+            doc.AddPage(page2);
+
+            let page3 = doc.NewPage();
+            page3.AddContent(`Page 3 ${txtOnPDF}`);
+            doc.AddPage(page3);
+
             doc.MakePDFFile();
+
+            return false; // To prevent the rest of the submit event.
         }
     </script>
 
     <h1>This is a PDF Test</h1>
 
-    <label for="someTxt" >Enter some text to appear on the PDF.</label>
-    <input id="someTxt" name="someTxt" placeholder="SomeText" />
-
-    <button onclick="clickTheBtn()">Make my PDF</button>
+    <table>
+        <tr>
+            <td>
+                <label for="txtOnPDF" >Enter text to appear on PDF:</label>
+            </td>
+            <td>
+                <input id="txtOnPDF" name="txtOnPDF" placeholder="Hello World?" value="Hello World!" required/>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label for="txtPDFTitle" >PDF Title</label>
+            </td>
+            <td>
+                <input id="txtPDFTitle" name="txtPDFTitle" placeholder="Document Title" value="" required/>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <label for="txtAuthor" >PDF Author</label>
+            </td>
+            <td>
+                <input id="txtAuthor" name="txtAuthor" placeholder="Your name goes here" value="" required/>
+            </td>
+        </tr>
+        <tr>
+            <td>&nbsp;</td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <center>
+                    <button onclick="triggerMakeAPDF()" type="button" style="cursor:pointer;">Make my PDF</button>
+                </center>
+            </td>
+        </tr>
+    </table>
 
 </body>
 </html>
diff --git a/src/Classes/base.js b/src/Classes/base.js
@@ -104,12 +104,14 @@ export class F_OFF_PDF{
             f.push(`>>`);
             f.push(`endobj`);
 
-            let LayoutObject = _page.GetPageLayoutObject();
-            f.push(`${LayoutObject.Id} 0 obj`);
-            f.push(`<< /PageLayout /${LayoutObject.Layout} /Pages ${LayoutObject.PageId} /Type /${LayoutObject.Type} >>`);
-            f.push(`endobj`);
-
-            if(firstPageLayoutId === null) firstPageLayoutId = `${LayoutObject.Id} 0 R`;
+            if(firstPageLayoutId === null){
+                let LayoutObject = _page.GetPageLayoutObject();
+                f.push(`${LayoutObject.Id} 0 obj`);
+                f.push(`<< /PageLayout /${LayoutObject.Layout} /Pages ${this.GetDoc().GetDocumentId()} 0 R /Type /${LayoutObject.Type} >>`);
+                f.push(`endobj`);
+
+                firstPageLayoutId = LayoutObject.Id;
+            }
         }
 
         let metaDataObjId = this.GetNextAvailablePageId();
@@ -124,18 +126,9 @@ export class F_OFF_PDF{
         f.push(`>>`);
         f.push(`endobj`);
 
-        // Calculate byte offsets for each object
-        let xrefOffsets = [0];
-        for (let i = 0; i < f.length; i++) {
-            xrefOffsets.push(xrefOffsets[i] + f[i].length + 1);
-        }
-
         // Build the xref section
         f.push(`xref`);
         f.push(`0 ${trailerObjId}`);
-        for (let i = 0; i < xrefOffsets.length; i++) {
-            f.push(`${("0000000000" + xrefOffsets[i]).slice(-10)} 00000 n`);
-        }
 
         // Build the trailer
         f.push(`trailer`);
@@ -145,7 +138,7 @@ export class F_OFF_PDF{
         f.push(`\t/Info ${metaDataObjId} 0 R`);
         f.push(`>>`);
         f.push(`startxref`);
-        f.push(`${xrefOffsets[xrefOffsets.length - 1]}`);
+        f.push(`0`);
         f.push(`%%EOF`);
 
         let PDFFileContent = f.join("\n").replaceAll("\t", "  ");

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,26 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import legacy from '@vitejs/plugin-legacy';
+import { terser } from 'rollup-plugin-terser';
+
+export default defineConfig({
+    build: {
+        outDir: 'dist',
+        rollupOptions: {
+            input: 'src/index.js',
+            output: {
+                entryFileNames: 'bundle.js',
+            },
+        },
+    },
+    plugins: [
+        legacy({
+            targets: ['defaults', 'not IE 11'],
+        }),
+        {
+            ...terser(),
+            apply: 'build',
+            enforce: 'post',
+        },
+    ],
+});