README.md

pdf

• repo

• example

  • more example

• 不够成熟

• head

  <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>

• body

  hook.doneEach(function () {
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    // Prepare canvas using PDF page dimensions
    var canvas = document.querySelector("canvas.pdf");
  
    if (canvas == null || canvas == undefined) {
      return;
    }
  
    var url = window.location.origin + canvas.getAttribute("path");
  
    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    var pdfjsLib = window["pdfjs-dist/build/pdf"];
  
    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      "//mozilla.github.io/pdf.js/build/pdf.worker.js";
  
    // Asynchronous download of PDF
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(
      function (pdf) {
        console.log("PDF loaded");
  
        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function (page) {
          console.log("Page loaded");
  
          var scale = 1.5;
          var viewport = page.getViewport({ scale: scale });
  
          var context = canvas.getContext("2d");
          canvas.height = viewport.height;
          canvas.width = viewport.width;
  
          // Render PDF page into canvas context
          var renderContext = {
            canvasContext: context,
            viewport: viewport,
          };
          var renderTask = page.render(renderContext);
          renderTask.promise.then(function () {
            console.log("Page rendered");
          });
        });
      },
      function (reason) {
        // PDF loading error
        console.error(reason);
      }
    );
  });

• example

  使用方法

  <canvas class="pdf" path="/path/to/pdf"></canvas>

• 简便使用

  <a href="/path/to/pdf" target="_blank">电路图</a>