import react, { useEffect, useState } from 'react';
import './index.css';
import * as myPdfjs from 'pdfjs-dist';

// 特别注意！！！！！！！！！这里的版本必须对应
// npm install 下载的依赖有可能会版本不一致导致报错 
// 报错的话，参考我的第一个参考链接
myPdfjs.GlobalWorkerOptions.workerSrc = `//cdn.bootcdn.net/ajax/libs/pdf.js/${myPdfjs.version}/pdf.worker.min.js`;
export default function App() {
  // 替换成需要的pdf文件
  const [pdfUrl, setPdfUrl] = useState('http://****.pdf');
  const [canvanId, setCanvanId] = useState("pdf-" + parseInt(Math.random() * 10000));

  useEffect(() => {
    setViewDocument(myPdfjs, pdfUrl, canvanId)
  },[]);

  return (
    <>
      <div id={canvanId}>
      </div>
    </>
  )
}

const setViewDocument = async (myPdfjs, pdfUrl, domId) => {
  let pdfDocument = await getPdfDocument(myPdfjs, pdfUrl);
  for(let i = 1; i <= pdfDocument._pdfInfo.numPages; i++){
    setPdfDocument(domId, pdfDocument, i)
  }
}

// 获取
const getPdfDocument = async (myPdfjs, pdfUrl) => {
  let loadingTask = myPdfjs.getDocument(pdfUrl);
  const pdfDocument = await loadingTask.promise;
  await pdfDocument.dataLoaded;
  return pdfDocument;
}

// 添加
const setPdfDocument = async (domId, pdfDocument, page) => {
  pdfDocument.getPage(page).then(page => {
    let scale = 2; // 缩放倍数
    let viewport = page.getViewport({ scale: scale });
    let mainDom = document.getElementById(domId);
    mainDom.setAttribute("style", 'width:' + viewport.width + 'px')
    let canvas = document.createElement("canvas");
    let context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    let renderContext = {
      canvasContext: context,
      viewport: viewport,
    };
    page.render(renderContext);
    mainDom.appendChild(canvas)
  });
}