Vue3预览并打印PDF的两种方法_vue-pdf-embed(1)

最新推荐文章于 2024-08-12 14:49:47 发布

2401_84411822

最新推荐文章于 2024-08-12 14:49:47 发布

阅读量775

点赞数 4

分类专栏：程序员文章标签： pdf vue.js javascript

本文链接：https://blog.csdn.net/2401_84411822/article/details/138306974

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

const scale = computed(() => transform:scale(${state.scale}))

// 操作按钮

<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">


**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**

### HTML

*   HTML5有哪些新特性？

*   Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

*   如何实现浏览器内多个标签页之间的通信？

*   ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

*   简述⼀下src与href的区别？

*   cookies,sessionStorage,localStorage 的区别？

*   HTML5 的离线储存的使用和原理？

*   怎样处理 移动端 1px 被 渲染成 2px 问题？

*   iframe 的优缺点？

*   Canvas 和 SVG 图形的区别是什么？


![](https://img-blog.csdnimg.cn/img_convert/476288e164f5711c5c11e55a79185bd8.png)



### JavaScript

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

*   问：0.1 + 0.2 === 0.3 嘛？为什么？

*   JS 数据类型

*   写代码：实现函数能够深度克隆基本类型

*   事件流

*   事件是如何实现的？

*   new 一个函数发生了什么

*   什么是作用域？

*   JS 隐式转换，显示转换

*   了解 this 嘛，bind，call，apply 具体指什么

*   手写 bind、apply、call

*   setTimeout(fn, 0)多久才执行，Event Loop

*   手写题：Promise 原理

*   说一下原型链和原型链的继承吧

*   数组能够调用的函数有那些？

*   PWA使用过吗？serviceWorker的使用原理是啥？

*   ES6 之前使用 prototype 实现继承

*   箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

*   事件循环机制 （Event Loop）


![](https://img-blog.csdnimg.cn/img_convert/0ba8bcdea9cbbc7373d2fa90b1951a07.png)