项目中遇到，如果用iframe加载pdf文件时，会自带pdf预览的一些样式，如果需要去掉这些样式，就需要使用pdf.js来解决。

这里需要去遍历pdf的页数，然后再渲染处理。

复制代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="./manifest.json" />
    <style>
      @font-face {
      body {
        margin: 0;
        background: #1a2023;
      }
      .pdf-header {
        position: fixed;
        width: 100%;
        top: 0;
        background: #1a2023;
        padding: 24px;
        border-bottom: 1px solid hsla(0, 0%, 100%, 0.15);
      }
      .pdf-info {
        word-wrap: break-word;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        display: flex;
        align-items: center;
        color: #fff;
      }
      .pdf-logo {
        height: 16px;
        flex-shrink: 0;
        position: absolute;
      }
      #pdf-title {
        flex: 1 1;
        text-align: center;
      }
      #canvas-container {
        margin-top: 77px;
        text-align: center;
      }
    </style>
    <title>Pdf 预览</title>
    <script src="./pdfjs-dist/build/pdf.min.js"></script>
    <script>
      const queryObject = () => {
        let q = {};
        window.location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] = v));
        return q;
      };
　　　　//多页展示
      const renderPage = (pdf, pageNumber) => {
        pdf.getPage(pageNumber).then(function (page) {
          const scale = 1.5;
          const viewport = page.getViewport({ scale: scale });

          // Prepare canvas using PDF page dimensions
          const canvas = document.getElementById(`the-canvas-${pageNumber}`);
          const context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render PDF page into canvas context
          const renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          const renderTask = page.render(renderContext);
          renderTask.promise.then(function () {
            console.log('Page rendered');
          });
        });
      };

      const init = () => {
　　　　　　//url=xxx.com?url=xxx&fileName=xxx
        // const { url = '', fileName = '' } = queryObject();
        const search = decodeURIComponent(location.search);
        let fileName = search.split('&')[1].split('=')[1];
        const url = search.split('&')[0].split('=')[1];
        document.getElementById('pdf-title').innerText = fileName;
        if (url === '') {
          return;
        }
        const pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.min.js';
        let canvasData = [];

        // Asynchronous download of PDF
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise
          .then(
            function (pdf) {
              for (let i = 0; i < pdf._pdfInfo.numPages; i++) {
                canvasData.push(i + 1);
              }
              let canvas;
              let container = document.getElementById('canvas-container');
              canvasData.forEach(i => {
                canvas = document.createElement('canvas');
                canvas.id = `the-canvas-${i}`;
                container.appendChild(canvas);
              });
              return pdf;
            },
            e => {
              console.log(e);
            }
          )
          .then(
            function (pdf) {
              for (let i = 0; i < pdf._pdfInfo.numPages; i++) {
                renderPage(pdf, i + 1);
              }
            },
            e => {
              console.log(e);
            }
          )
          .catch(e => {
            console.log(e);
          });
      };
      window.addEventListener('load', init);
    </script>
  </head>

  <body version="VERSION">
    <div class="pdf-header">
      <div class="pdf-info">
        <img src="./imgs/logo.png" alt="" class="pdf-logo" />
        <div id="pdf-title"></div>
      </div>
    </div>
    <div>
      <div id="canvas-container"></div>
    </div>
  </body>
</html>
复制代码

config-overrides.js：

复制代码
const {addWebpackAlias,addWebpackPlugin} = require('customize-cra');
module.exports = {
  webpack: override(
    addWebpackAlias({
      '@': path.resolve(__dirname, 'src'),
      _styles: path.resolve(__dirname, 'src/styles'),
    }),
    addWebpackPlugin(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/pdfjs-dist',
            to: 'pdfjs-dist',
          },
          {
            from: 'node_modules/pdfjs-dist/build/pdf.worker.min.js',
            to: 'pdfjs-dist/build',
            transform(content) {
              return content.toString().replace('"Sig"', '"DebugSig"');
            },
          },
          {
            from: 'node_modules/pdfjs-dist/build/pdf.min.js',
            to: 'pdfjs-dist/build',
          },
        ],
      })
    ),
  );  
}
复制代码