Webviewer linearization

README.md

@@ -77,4 +77,4 @@ Samples showing how to use various WebViewer features.
 - [webviewer-user-bookmarks-nodejs](./webviewer-user-bookmarks-nodejs) - Save and load user bookmarks with a Node.js backend
 - [webviewer-barcode](./webviewer-barcode) - Barcode generation with WebViewer
 - [webviewer-react-canvasToPDF](./webviewer-react-canvasToPDF) - Export a canvas to PDF with WebViewer
-
+- [webviewer-linearization][./webviewer-linearization] - Setup a web-optimized viewing experience using WebViewer

lerna.json

@@ -20,6 +20,7 @@
       "webviewer-generate-docx",
       "webviewer-jquery",
       "webviewer-js",
+      "webviewer-linearization",
       "webviewer-mendix",
       "webviewer-microsoft-teams",
       "webviewer-nextjs-14",

webviewer-linearization/.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+DS_Store
+
+# WebViewer library
+client/public/webviewer
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

webviewer-linearization/README.md

@@ -0,0 +1,63 @@
+# WebViewer Linearization Sample
+
+[WebViewer](https://docs.apryse.com/web/guides/get-started) is a powerful JavaScript-based PDF Library that is part of the [Apryse SDK](https://apryse.com/). It provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.
+
+- [WebViewer Documentation](https://docs.apryse.com/web/guides/get-started)
+- [WebViewer Demo](https://showcase.apryse.com/)
+
+This repo is designed for users who are planning to setup a web-optimized viewing experience using WebViewer in their application by demonstrating the requirements for linearization when loading a document.
+
+Linearization optimizes PDFs so that they can be streamed into a client applocation. This allows remote online documents to be displayed almost instantly without having to wait for them to be completely downloaded.
+
+## Get your trial key
+
+A license key is required to run WebViewer. You can obtain a trial key in our [get started guides](https://docs.apryse.com/web/guides/get-started), or by signing-up on our [developer portal](https://dev.apryse.com/).
+
+
+## Initial setup
+
+Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/). Node 20 recommended.
+
+## Install
+
+```
+git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
+cd webviewer-samples/webviewer-linearization
+npm install
+```
+
+### Install WebViewer Core Dependencies
+
+The preferred method to install the Core dependencies is to use the [WebViewer NPM package](https://docs.apryse.com/documentation/web/get-started/npm/#1-install-via-npm).
+
+Once installed, copy the Core & UI folders into the path being used by the viewer for its dependencies 
+/client/public/webviewer/lib
+
+A post install script (copy-webviewer-files.cjs) is included to automate this process
+
+## Run
+```
+npm start
+```
+
+## Project structure
+
+```
+client/ 
+    public/ 
+        webviewer/
+            lib/        - folder containing WebViewer files
+    src/
+        App.jsx         - main file defining WebViewer frontend
+server/ 
+    files/              - static folder serving the files
+    server.js           - main file defining the server configurations
+```
+
+
+## How to use
+
+- Run the client frontend & server backend 
+- Go to http://localhost:5173/ and see the linearized PDF load onto WebViewer via range request
+- Open the Developer Tools and the Network Panel to see the 'linearized' 206 partial range request
+- Optional: Click on the button on the top to check if the document is linearized 

webviewer-linearization/client/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

webviewer-linearization/client/eslint.config.js

@@ -0,0 +1,37 @@
+// ES6 Compliant Syntax
+// GitHub Copilot - Claude Sonnet 4.5 - December 22, 2025
+// eslint.config.js
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

webviewer-linearization/client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

webviewer-linearization/client/src/App.css

@@ -0,0 +1,44 @@
+.App {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.App .header {
+  width: 100%;
+  height: 60px;
+  padding: 8px 8px 8px 16px;
+  box-sizing: border-box;
+  background: #00a5e4;
+  font-size: 1.2em;
+  line-height: 44px;
+  color: white;
+}
+
+.button-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-top: 10px;
+}
+
+#sample-button {
+  width: 200px;
+  height: 40px;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+#sample-button:hover {
+  background-color: #e0e0e0;
+}
+
+#result-box {
+  font-size: 16px;
+  color: #333;
+}

webviewer-linearization/client/src/App.jsx

@@ -0,0 +1,51 @@
+// ES6 Compliant Syntax
+// GitHub Copilot - Claude Sonnet 4.5 - December 22, 2025
+// App.jsx
+
+import { useEffect, useRef, useState } from 'react'
+import WebViewer from '@pdftron/webviewer'
+import './App.css'
+
+
+function App() {
+  const viewer = useRef(null);
+  const [linearized, setLinearized] = useState('');
+
+  useEffect(() => {
+    WebViewer(
+      {
+        path: '/webviewer/lib',
+        l: 'YOUR_LICENSE_KEY',
+        fullAPI: true,
+      },
+      viewer.current
+    ).then((instance) => {
+      console.log('WebViewer instance ready', instance);
+
+      const { documentViewer } = instance.Core;
+
+      instance.UI.loadDocument('http://localhost:4000/linearized');
+
+      document.getElementById('sample-button').addEventListener('click', async () => {
+        const pdfDoc = await documentViewer.getDocument().getPDFDoc();
+        const isLinearized = await pdfDoc.isLinearized();
+        setLinearized(isLinearized ? '✅ File is linearized' : '❌ File is not linearized');
+      });
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="App">
+        <div className="button-container">
+          <button id="sample-button">Check if file is linearized</button>
+          <div id="result-box">{linearized}</div>
+        </div>
+        <div className="webviewer" ref={viewer}></div>
+      </div>
+    </>
+  );
+}
+
+
+export default App

webviewer-linearization/client/src/index.css

@@ -0,0 +1,19 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  overflow: hidden;
+}
+
+.webviewer {
+  flex: 1;
+  margin: 8px;
+  -webkit-box-shadow: 1px 1px 10px #999;
+  box-shadow: 1px 1px 10px #999;
+  box-sizing: border-box;
+  height: calc(100% - 76px);
+}

webviewer-linearization/client/src/main.jsx

@@ -0,0 +1,14 @@
+// ES6 Compliant Syntax
+// GitHub Copilot - Claude Sonnet 4.5 - December 22, 2025
+// main.jsx
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  // <React.StrictMode> ❌ Comment this out in dev to avoid double calls
+    <App />
+  // </StrictMode>
+)

webviewer-linearization/client/vite.config.js

@@ -0,0 +1,14 @@
+// ES6 Compliant Syntax
+// GitHub Copilot - Claude Sonnet 4.5 - December 22, 2025
+// vite.config.js
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+  },
+})