Add documentation on standard fonts, update all samples to use standa…

…rd fonts

Closes wojtekmaj#961

.eslintignore

@@ -2,4 +2,5 @@
 **/dist/*
 **/node_modules/
 **/public/cmaps/*
+**/public/standard_fonts/*
 **/public/pdf.worker.js

README.md

@@ -248,6 +248,94 @@ import { pdfjs } from 'react-pdf';
 />;
 ```
 
+### Support for standard fonts
+
+If you want to support PDFs using standard fonts (deprecated in PDF 1.5, but still around), then you would also need to include standard fonts in your build and tell React-PDF where they are.
+
+#### Copying fonts
+
+First, you need to copy standard fonts from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). Standard fonts are located in `pdfjs-dist/standard_fonts`.
+
+##### Webpack
+
+Add `copy-webpack-plugin` to your project if you haven't already:
+
+```
+npm install copy-webpack-plugin --save-dev
+```
+
+Now, in your Webpack config, import the plugin:
+
+```js
+import path from 'path';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+```
+
+and in `plugins` section of your config, add the following:
+
+```js
+new CopyWebpackPlugin({
+  patterns: [
+    {
+      from: path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts'),
+      to: 'standard_fonts/'
+    },
+  ],
+}),
+```
+
+##### Parcel, Browserify and others
+
+If you use Parcel, Browserify or other bundling tools, you will have to make sure on your own that standard fonts are copied to your project's output folder.
+
+For example, you could use a custom script like:
+
+```js
+import path from 'path';
+import fs from 'fs';
+
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
+
+function copyDir(from, to) {
+  // Ensure target directory exists
+  fs.mkdirSync(to, { recursive: true });
+
+  const files = fs.readdirSync(from);
+  files.forEach((file) => {
+    fs.copyFileSync(path.join(from, file), path.join(to, file));
+  });
+}
+
+copyDir(standardFontsDir, 'dist/standard_fonts/');
+```
+
+#### Setting up React-PDF
+
+Now that you have standard fonts in your build, pass required options to Document component by using `options` prop, like so:
+
+```js
+<Document
+  options={{
+    standardFontDataUrl: 'standard_fonts/',
+  }}
+/>
+```
+
+Alternatively, you could use standard fonts from external CDN:
+
+```js
+import { pdfjs } from 'react-pdf';
+
+<Document
+  options={{
+    standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`,
+  }}
+/>;
+```
+
 ## User guide
 
 ### Document

sample/create-react-app-5/.gitignore

@@ -1,4 +1,5 @@
 build
 node_modules
 public/cmaps
+public/standard_fonts
 public/pdf.worker.js

sample/create-react-app-5/package.json

@@ -6,6 +6,7 @@
   "main": "src/index.jsx",
   "scripts": {
     "copy-cmaps": "node ./scripts/copy-cmaps.js",
+    "copy-standard-fonts": "node ./scripts/copy-standard-fonts.js",
     "copy-worker": "node ./scripts/copy-worker.js",
     "start": "react-scripts start",
     "build": "react-scripts build",

sample/create-react-app-5/scripts/copy-standard-fonts.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+function copyDir(from, to) {
+  // Ensure target directory exists
+  fs.mkdirSync(to, { recursive: true });
+
+  const files = fs.readdirSync(from);
+  files.forEach((file) => {
+    fs.copyFileSync(path.join(from, file), path.join(to, file));
+  });
+}
+
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
+const targetDir = path.join('dist', 'standard_fonts');
+
+copyDir(standardFontsDir, targetDir);

sample/create-react-app-5/src/Sample.jsx

@@ -7,6 +7,7 @@ import './Sample.css';
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export default function Sample() {

sample/parcel/Sample.jsx

@@ -9,6 +9,7 @@ import pdfFile from './sample.pdf';
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export default function Sample() {

sample/parcel/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "copy-cmaps": "node ./scripts/copy-cmaps.js",
+    "copy-standard-fonts": "node ./scripts/copy-standard-fonts.js",
     "build": "parcel build index.html --public-url ./",
     "start": "parcel index.html"
   },

sample/parcel/scripts/copy-standard-fonts.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+function copyDir(from, to) {
+  // Ensure target directory exists
+  fs.mkdirSync(to, { recursive: true });
+
+  const files = fs.readdirSync(from);
+  files.forEach((file) => {
+    fs.copyFileSync(path.join(from, file), path.join(to, file));
+  });
+}
+
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
+const targetDir = path.join('dist', 'standard_fonts');
+
+copyDir(standardFontsDir, targetDir);

sample/parcel2/Sample.jsx

@@ -9,6 +9,7 @@ const pdfFile = new URL('./sample.pdf', import.meta.url).toString();
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export default function Sample() {

sample/parcel2/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "copy-cmaps": "node ./scripts/copy-cmaps.js",
+    "copy-standard-fonts": "node ./scripts/copy-standard-fonts.js",
     "build": "parcel build index.html --public-url ./",
     "start": "parcel index.html"
   },

sample/parcel2/scripts/copy-standard-fonts.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+
+function copyDir(from, to) {
+  // Ensure target directory exists
+  fs.mkdirSync(to, { recursive: true });
+
+  const files = fs.readdirSync(from);
+  files.forEach((file) => {
+    fs.copyFileSync(path.join(from, file), path.join(to, file));
+  });
+}
+
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
+const targetDir = path.join('dist', 'standard_fonts');
+
+copyDir(standardFontsDir, targetDir);

sample/webpack4/Sample.jsx

@@ -7,6 +7,7 @@ import './Sample.less';
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export default function Sample() {

sample/webpack4/webpack.config.js

@@ -7,6 +7,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 
 const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps');
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
 
 module.exports = {
   mode: isProduction ? 'production' : 'development',
@@ -47,7 +51,11 @@ module.exports = {
       template: 'index.html',
     }),
     new CopyWebpackPlugin({
-      patterns: [{ from: './sample.pdf' }, { from: cMapsDir, to: 'cmaps/' }],
+      patterns: [
+        { from: './sample.pdf' },
+        { from: cMapsDir, to: 'cmaps/' },
+        { from: standardFontsDir, to: 'standard_fonts/' },
+      ],
     }),
   ],
   devServer: {

sample/webpack5/Sample.jsx

@@ -7,6 +7,7 @@ import './Sample.less';
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export default function Sample() {

sample/webpack5/webpack.config.js

@@ -7,6 +7,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 
 const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps');
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
 
 module.exports = {
   mode: isProduction ? 'production' : 'development',
@@ -47,7 +51,11 @@ module.exports = {
       template: 'index.html',
     }),
     new CopyWebpackPlugin({
-      patterns: [{ from: './sample.pdf' }, { from: cMapsDir, to: 'cmaps/' }],
+      patterns: [
+        { from: './sample.pdf' },
+        { from: cMapsDir, to: 'cmaps/' },
+        { from: standardFontsDir, to: 'standard_fonts/' },
+      ],
     }),
   ],
   devServer: {

test/Test.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { PDFDataRangeTransport } from 'pdfjs-dist';
-import { Document, Outline, Page } from 'react-pdf/src/entry.webpack';
+import { Document, Outline, Page } from 'react-pdf/dist/esm/entry.webpack';
 import 'react-pdf/src/Page/AnnotationLayer.css';
 
 import { isArrayBuffer, isBlob, isBrowser, isFile, loadFromFile } from 'react-pdf/src/shared/utils';
@@ -18,6 +18,7 @@ import { dataURItoBlob } from './shared/utils';
 const options = {
   cMapUrl: 'cmaps/',
   cMapPacked: true,
+  standardFontDataUrl: 'standard_fonts/',
 };
 
 export const readAsDataURL = (file) =>

test/webpack.config.js

@@ -9,6 +9,10 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isDevelopment = !isProduction;
 
 const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps');
+const standardFontsDir = path.join(
+  path.dirname(require.resolve('pdfjs-dist/package.json')),
+  'standard_fonts',
+);
 
 module.exports = {
   mode: isProduction ? 'production' : 'development',
@@ -64,7 +68,11 @@ module.exports = {
   },
   plugins: [
     new CopyWebpackPlugin({
-      patterns: ['test.pdf', { from: cMapsDir, to: 'cmaps/' }],
+      patterns: [
+        'test.pdf',
+        { from: cMapsDir, to: 'cmaps/' },
+        { from: standardFontsDir, to: 'standard_fonts/' },
+      ],
     }),
     new HtmlWebpackPlugin({
       template: 'index.html',