2024年前端最新Vue3预览并打印PDF的两种方法_vue-pdf-embed，关于网络优化你必须要知道的重点

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<div>
      // 操作按钮
      <div class="page-tool">
        <div class="page-tool-item" @click="lastPage">上一页</div>
        <div class="page-tool-item" @click="nextPage">下一页</div>
        <div class="page-tool-item">{{ state.pageNum }}/{{ state.numPages }}</div>
        <div class="page-tool-item" @click="pageZoomOut">放大</div>
        <div class="page-tool-item" @click="pageZoomIn">缩小</div>
     </div>
     //pdf预览
     <vue-pdf-embed ref='pdf' :source="state.source" :style="scale" :page="state.pageNum" class="vue-pdf-embed" />
 </div>

<script setup>
    onMounted(()=>{
        // 首先请求接口，获取pdf存放地址，赋值给pdfUrl（此处省略请求代码）
        // 拿到pdf路径后，执行下面的函数
        getPdfUrl(pdfUrl) 
    })
    function getPdfUrl(data){
        state.source = data
        pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
        const loadingTask = pdfjsLib.getDocument(data)
        loadingTask.promise.then(pdf => {
            state.numPages = pdf.numPages
        })
    }
    // 上一页
    function lastPage() {
        if (state.pageNum > 1) {
            state.pageNum -= 1
        }
    }
    // 下一页
    function nextPage() {
        if (state.pageNum < state.numPages) {
            state.pageNum += 1
        }
    }
    // 放大
    function pageZoomOut() {
        if (state.scale < 2) {
            state.scale += 0.1
        }
    }
    // 缩小
    function pageZoomIn() {
        if (state.scale > 1) {
            state.scale -= 0.1
        }
    }
</script>

为了好看一些，我给操作按钮写了样式

<style lang="scss" scoped>
    .page-tool {
        display: flex;
        position: absolute;
        top: 5px;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
        align-items: center;
        background: rgb(66 66 66);
        color: white;
        border-radius: 19px;
        cursor: pointer;
        justify-content: center;
        font-size: 15px;
    }
    .page-tool-item {
        padding: 4px 10px;
        cursor: pointer;
    }
</style>

最终的实现效果：

打印：

const { proxy } = getCurrentInstance()

<div @click='print'>打印</div>
<script setup>
    function print(){
        proxy.$refs['pdf'].print()
    }
</script>

方法二：使用pdfjs-dist，canvas渲染，pdf.js打印

说明：pdf.js可以打印canvas数据，所以选择这个插件

①首先，安装依赖

pnpm install pdfjs-dist

安装之后，在项目的node_modules文件夹里，找到pdfjs-dist ->build->pdf.worker.js文件，拷贝出来放到public根目录下，接着找到pdfjs-dist ->cmaps文件夹，拷贝一下放到public->static文件夹里，如下图所示：

②下载print.js放入项目中，在需要使用的页面，引入方法，然后方法调用

具体我是参考的这篇博文：前端使用print.js实现打印_printjs_@我不认识你的博客-CSDN博客

③代码实现

// 打印按钮
<div @click="print">打印</div> 

//pdf预览显示
<div>
    <div id="printDom" ref="printDom">
        <div v-for="item in state.numPages" :key="item">
            <canvas :id="`pdfCanvas-${item}`" :ref="`pdfCanvas-${item}`" />
        </div>
    </div>


### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**