1. Point to the PDF path with iframe: ios supports preview and Android phones will be redirected to the download page. 2. Office Web App: you can preview part of PDF files, which is convenient, and the code modification amount is basically zero. However, when you need a password, the PDF will be directly covered by a mask, and the files can not be seen or downloaded. But you can also remove CSS styles by modifying the Office Web App style file. There are also some PDF damage, so you can’t use Office Web App to preview PDF, and the latest version does not support PDF preview.

The pdF.js plugin is now used: I will add it later

Pit 1: Our company needs to preview PDF files on both web and mobile terminals, so don’t download the official recommended version 2.8.335. This version of Android doesn’t work. After my own test, 2.5.207 can make mobile terminal available,Attach a linkDownload the package.

Trap 2: The original package does not support cross-domain file browsing. Comment out the error message in viewer.js


    try {
      var viewerOrigin = new URL(window.location.href).origin || 'null';
      if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
        return;
      }
      var fileOrigin = new URL(file, window.location.href).origin;
      // Cross-domain request error
      //if (fileOrigin ! == viewerOrigin) {
        //throw new Error('file origin does not match viewer\'s');
      / /}
    } catch (ex) {
      var message = ex && ex.message;
      PDFViewerApplication.l10n.get('loading_error'.null.'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
        PDFViewerApplication.error(loadingErrorMessage, { message: message });
      });
      throw ex;
    }
Copy the code

Pit 3: Electronic signature cannot be displayed

    if (data.fieldType === "Sig") {
      data.fieldValue = null;

      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
    }
Copy the code

Pit 4: When the PDF is set to landscape, there is no problem in previewing the PDF, it will print an extra blank page. This is the style of the stable version 2.8.335, and the style of the 2.5.207 version has a bug.

/* wrapper around (scaled) print canvas elements */
  #printContainer > div {
    page-break-after: always;
    page-break-inside: avoid;

    /* The wrapper always cover the whole page. */
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #printContainer canvas.#printContainer img {
    /* The intrinsic canvas / image size will make sure that we fit the page. */
    max-width: 100%;
    max-height: 100%;

    direction: ltr;
    display: block;
  }
Copy the code