前端 pdf 预览功能

vue-pdf

vue-pdf 只展示pdf内容 ，pdf相关功能需要 加入其他参数实现

vue-pdf 整体展示

这是我在没有webpack扩展/修改等的情况下使用Nuxt解决此问题的方法。适用于多页pdf。
通过npm安装

npm install -save vue-pdf

创建一个名为vue-pdf.js的插件：

import Vue from 'vue'
import pdf from "vue-pdf";

Vue.component('vue-pdf', pdf)

添加到nuxt.config.js：

plugins: [
  {
    src: '~/plugins/pdf.js', ssr: false },
],

build: {
   
    extend(config, ctx) {
   
      config.output.globalObject = 'this'
      config.module.rules.push(
        {
   
          test: /\.pdf$/,
          loader: 'url-loader'
        }
      )
  },
},  

在您的组件中，执行以下操作。
pdf 多页显示在一个页面

## nuxt使用客户端渲染 确保将模板代码包装在<client-only>中。
<template>
    <client-only>
        <vue-pdf class="your-pdf-class" :src="pdfSrc" :page="1" @num-pages="pdfPageCount = $event"></vue-pdf>
        <div v-if="pdfPageCount > 1">
            <div v-for="(pageNum, index) in pdfPageCount " :key="index"