vue-cli3+pdf

最新推荐文章于 2024-08-12 10:03:07 发布

菜鸟成长史zooj

最新推荐文章于 2024-08-12 10:03:07 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue pdf-dist vue-cli3 pdf.js

本文链接：https://blog.csdn.net/qq_38140101/article/details/82840922

版权

本文介绍了如何在vue-cli3项目中利用pdf.js库进行PDF预览。通过npm安装pdfjs-dist依赖，并创建页面实现基础预览功能。UI需求包括全页面预览，支持url和base64格式。尽管尚未找到打印和下载功能的API，但作者计划继续研究并补充相关内容。

摘要由CSDN通过智能技术生成

ui大神说要pdf预览，设计图长得跟传统的不一样，所以我一菜鸟就去调研了一下，

为了以后可以预览其他类型的一些文件和兼容性问题，就选用啦pdf.js 官网是：http://mozilla.github.io/pdf.js/,,,,直接的下载就可以，官网提供的demo由于这个项目用不了，所以就直接

npm install pdfjs-dist -S ，安装依赖

import PDFJS from 'pdfjs-dist'在vue文件中引入

构建一个页面

<template>
    <div class="cpdf">
        <!--头部-->
        <pm-headroom class="pm-head-room">
            <v-toolbar color="#323639" height="60px">
                <div class="pdf-header" id="pdf-header">
                    <div class="text">{
    {title}}</div>
                    <div class="pdf-page">
                        <!--<span @click="prev" >上一页</span>-->
                        <span class="page-text">(&nbsp;<span v-text="page_num"></span> / <span v-text="page_count"></span>&nbsp;)</span>
                        <!--<span @click="next" &g