No projeto vue, baixe o pacote compactado pdfjs e use o pdfjs como um recurso estático usando pfdjs

demonstração, consulte : endereço de demonstração

versão:

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

1. Etapas detalhadas

1. Baixe o pacote compactado de pdfjs, altere o código-fonte conforme necessário e exclua as partes desnecessárias

1. Baixe o pacote compactado de pdfjs no github e coloque-o em static no diretório raiz do projeto após a descompactação (ou na pasta pdfjs pública)
2. Link para download: https://github.com/mozilla/pdf.js/releases/tag/v2.5.207

2. Teste no componente:

Use viewer.html para realizar a exibição online de arquivos PDF. Observação: só pode ser um caminho absoluto ou fluxo de arquivo

  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. Mensagem de erro encontrada:file origin does not match viewer’s

Ao encontrar a mensagem de erro da origem do arquivo não corresponde ao do visualizador, comente e ajuste as seguintes linhas de código para determinar o endereço remoto no arquivo viewer.js (porque o pdf.js não suporta solicitações de domínio cruzado)

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

4. Mensagem de erro encontrada:Uncaught SyntaxError: Unexpected token '<'

Em projetos vue-cli3 e acima, os recursos baixados devem ser colocados na pasta pública; caso contrário, um erro será relatado:Uncaught SyntaxError: Unexpected token '<'

arquivos pdfjs na pasta pública: quando em uso, pdfjs/... /não está envolvido no público;

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

Dois, teste e use no componente

Test.vue文件

1. Abra uma nova página para exibir o método pdf, 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. Exibir pdf e iframe na página atual

<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 uma demonstração detalhada, consulte : endereço de demonstração

vue project, npm install maneira de usar pdfjs , consulte o blog

Este artigo se refere a: blog , informações detalhadas podem ir para o blog para visualização.