Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题

简介: Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题
<template>
    <iframe
        :src="`static/PDF/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`" 
        frameborder="no"        
        scrolling="no" 
        style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;">
    </iframe>
</template>
<script>
export default {
    data() { return { pdfUrl: '您的pdf文件路径', }; },
};
</script>


image.png

根据您的使用场景下载解压放入vue项目的static/PDF

主要就是这两文件夹

然后就按照最上面的代码开始用吧


相关文章
|
1月前
|
前端开发
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
40 0
|
1月前
|
JavaScript 索引 容器
vue实现多文件预览以及切换
vue实现多文件预览以及切换
47 0
|
1月前
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
193 0
|
1月前
|
JavaScript API
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
|
1月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
777 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
1月前
|
编解码 前端开发 JavaScript
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
56 1
|
1月前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
|
1月前
|
JavaScript
Vue项目使用bpmn预览流程图
Vue项目使用bpmn预览流程图
28 0
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
135 0