页面PDF文件预览

首先通过NPM引入

npm install pdfobject --save-dev

也可以去官网直接下载js文件

https://pdfobject.com/

组件中引入pdfobject

import PDFObject from "pdfobject";

然后在页面中使用

<template>
    <div id="pdfs"></div>
</template>
<script>
     import PDFObject from "pdfobject";
    export default {
        data() {
            return {}
        },

        mounted() {
            this.initPdf()
        },

        mounted() {
           initPdf() {
              let options = {
                 pdfOpenParams: {  // pdf打开时的参数对象
                   pagemode: "bookmarks", // 页面模式 bookmarks为书签模式，thumbs为缩图模式
                   scrollbar: "1", //滚动条 1为显示0我为隐藏
                   toolbar: "1", // 工具条 1为显示0我为隐藏
                   statusbar: "1", // 状态栏
                   messages: "0", // 文件信息
                   navpanes: "1" // 导航窗格
                }
              };

          // let u ='assets/files/data/upload/pdf20200116201844/pdfs/测试7.pdf' 
          let u = 'http://192.168.1.82:8080/files/data/upload/pdf20200116201844/pdfs/测试        7.pdf'; // pdf文件地址

          PDFObject.embed(u, "#pdfs", options);
         },
        }
    };

这样就用PDFObject.js在页面嵌入一个最基础的pdf预览。

(官网也有一个代码生成器，可以挑选完参数后直接生成的代码)