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

主要就是这两文件夹

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


相关文章
|
5天前
|
前端开发
PDF文件上传转成base64编码并支持预览
PDF文件上传转成base64编码并支持预览
43 12
|
2月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
203 0
|
5天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
11 0
|
2月前
|
Web App开发 iOS开发 容器
Vue3PDF预览(vue3-pdf-app)
`vue3-pdf-app` 插件提供了一个简单而强大的 PDF 预览解决方案。通过 `&lt;a&gt;` 标签即可快速预览 PDF 文件。为满足更复杂的定制需求,提供了 `PDFViewer.vue` 组件,基于 `vue3-pdf-app@1.0.3` 封装,支持多种功能如缩放、旋转、全屏预览、打印等,并可自定义主题颜色与语言。组件属性包括文件地址 (`src`)、预览容器尺寸 (`width`, `height`)、默认缩放规则 (`pageScale`) 和主题 (`theme`) 等。适用于多种浏览器,方便集成到项目中。
217 1
Vue3PDF预览(vue3-pdf-app)
|
1月前
|
JavaScript
vue导出pdf(接口)
vue导出pdf(接口)
20 3
|
2月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
1253 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
2月前
|
JavaScript 前端开发
vue导出pdf(大数量可能有问题)
vue导出pdf(大数量可能有问题)
118 2
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
11 3
|
4天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
40 6
|
2天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
5 2

热门文章

最新文章