En el proyecto vue, descargue el paquete comprimido pdfjs y use pdfjs como recurso estático usando pfdjs

demo, consulte : dirección de demostración

versión:

 "vue": "^2.6.11",
  "pdfjs-dist": "^2.6.347"

1. Pasos detallados

1. Descargue el paquete comprimido de pdfjs, cambie el código fuente según sea necesario y elimine las partes innecesarias

1. Descargue el paquete comprimido de pdfjs en github y colóquelo en static en el directorio raíz del proyecto después de la descompresión (o en la carpeta pública pdfjs)
2. Enlace de descarga: https://github.com/mozilla/pdf.js/releases/tag/v2.5.207

2. Prueba en el componente:

Utilice viewer.html para realizar la visualización en línea de archivos pdf. Nota: solo puede ser una ruta absoluta o una secuencia de archivos

  window.open(`pdfjs/web/viewer.html?file=${
      
      this.pdfFileUrl}`); // pdfFileUrl为远程地址
  window.open(`pdfjs/web/viewer.html?file=test.pdf`); // 本地文件test.pdf 和viewer.html文件处于同级目录；
 测试的pdf地址：
 https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf
 https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf

3. Mensaje de error encontrado:file origin does not match viewer’s

Cuando el mensaje de error del origen del archivo no coincide con el del visor, comente y ajuste las siguientes líneas de código para determinar la dirección remota en el archivo viewer.js (porque pdf.js no admite solicitudes entre dominios)

            //  if (origin !== viewerOrigin && protocol !== "blob:") {
    
    
            //   throw new Error("file origin does not match viewer's");
          // }

4. Mensaje de error encontrado:Uncaught SyntaxError: Unexpected token '<'

En proyectos vue-cli3 y superiores, los recursos descargados deben colocarse en la carpeta pública; de lo contrario, se informará un error:Uncaught SyntaxError: Unexpected token '<'

archivos pdfjs en la carpeta pública: cuando está en uso, pdfjs/... /no está involucrado en público;

 window.open(`pdfjs/web/viewer.html?file=${
      
      this.pdfFileUrl}`); // pdfFileUrl为远程地址

Dos, probar y usar en el componente.

Test.vue文件

1. Abra una nueva página para mostrar pdf, método window.open (url)

<template>
  <div class="test">
    <el-button type="danger" @click="previewPDF">点击预览pdf</el-button>
  </div>
</template>
<script>
export default {
    
    
  methods: {
    
    
    previewPDF() {
    
    
      let pdfFileUrl =
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
      window.open(`pdfjs/web/viewer.html?file=${
      
      pdfFileUrl}`); // 新开一页，展示pdf文档
    }
  }
};
</script>

2. Mostrar pdf e iframe en la página actual

<template>
  <div class="test">
    <el-button v-if="!pdfFileUrl" type="danger" @click="previewPDF"
      >点击预览pdf</el-button
    >
    <iframe
      v-if="pdfFileUrl"
      :src="'pdfjs/web/viewer.html?file=' + pdfFileUrl"
      class="pdf-viewer"
    />
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      pdfFileUrl: ""
    };
  },
  methods: {
    
    
    previewPDF() {
    
    
      this.pdfFileUrl ="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
    }
  }
};
</script>
<style lang="scss">
.pdf-viewer {
    
    
  height: 100vh;
  width: 100vw;
}
.test {
    
    
  overflow-x: hidden;
}
</style>

Para obtener una demostración detallada, consulte : dirección de demostración

vue project, npm install forma de usar pdfjs , consulte el blog

Este artículo hace referencia a: blog , la información detallada puede ir al blog para verla.