Vue3PDF预览(vue3-pdf-app)

这篇具有很好参考价值的文章主要介绍了Vue3PDF预览(vue3-pdf-app)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue3-pdf-app 插件

网站预览PDF最佳且最简单的方式:

<a class="u-pdf" href="pdf url..." target="_blank">PDF FileName</a>

如果需要自定义网页内预览,可以采用本PDF预览组件(PDFViewer.vue)

本组件基于 vue3-pdf-app@1.0.3 插件进行二次封装,更适合日常使用需要!

插件支持功能包括但不限于:缩放、旋转、全屏预览、打印、下载、内容检索、dark/light主题定制化、侧边缩略图、页码跳转、本地化配置、多个浏览器支持(经测试 Google、Firefox、safari 均支持良好)、查看文档属性!

其中 dark 和 light 主题均支持自定义覆盖各个部分颜色变量,从而定制主题样式!

插件默认语言是English,同时也可定制本地化语言为中文,只需从以下链接下载资源文件,使用 <link rel="resource" type="application/l10n" href="path-to-localization-file"> 引入即可:

  • viewer.properties

组件可自定义设置以下属性:

  • pdf文件地址(src),类型:string,必传,默认 ''

  • 预览容器宽度(width),类型:number | string,默认 '100%'

  • 预览容器高度(height),类型:number | string,默认 '100vh'

  • 页面默认缩放规则(pageScale),类型:number | string,默认 'page-fit',自适应展示一页,可选:'page-actual'|'page-width'|'page-height'|'page-fit'|'auto',数字即代表缩放为:pageScale%

  • 预览主题(theme),类型:string,默认 'dark',可选 dark | light

  • 覆盖pdf文件名(fileName),类型:string,默认 ''

效果如下图:

theme: dark

Vue3PDF预览(vue3-pdf-app)

theme: light

Vue3PDF预览(vue3-pdf-app)

①安装插件:pnpm i vue3-pdf-app@1.0.3

②创建PDF预览组件PDFViewer.vue:

<script setup lang="ts">
import { computed } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
interface Props {
  src: string|ArrayBuffer // pdf地址
  width?: string|number // 预览容器宽度
  height?: string|number // 预览容器高度
  pageScale?: number|string // 页面默认缩放规则,可选 'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'
  theme?: string // 预览主题 可选 dark | light
  fileName?: string // 覆盖pdf文件名
}
const props = withDefaults(defineProps<Props>(), {
  src: '',
  width: '100%',
  height: '100vh',
  pageScale: 'page-fit', // 默认自适应展示一页
  theme: 'dark',
  fileName: ''
})
const viewerWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})
const viewerHeight = computed(() => {
  if (typeof props.height === 'number') {
    return props.height + 'px'
  } else {
    return props.height
  }
})
// emitted only once when Pdfjs library is binded to vue component
// Can be used to set Pdfjs config before pdf document opening.
// function afterCreated (pdfApp: any) {
//   console.log('afterCreated pdfApp:', pdfApp)
// }
// emitted when pdf is opened but pages are not rendered
// function openHandler (pdfApp: any) {
//   console.log('open pdfApp:', pdfApp)
// }
const emit = defineEmits(['loaded'])
// emitted when pdf document pages are rendered. Can be used to set default pages scale
function pagesRendered (pdfApp: any) {
  console.log('pagesRendered pdfApp:', pdfApp)
  emit('loaded', pdfApp)
}
</script>
<template>
  <!-- viewer.properties: 该文件已放置本地,使用相对路径引入,亦可放置cdn上,使用网络路径引入 -->
  <link rel="resource" type="application/l10n" href="/src/assets/files/viewer.properties">
  <VuePdfApp
    :page-scale="pageScale"
    :theme="theme"
    :style="`width: ${viewerWidth}; height: ${viewerHeight};`"
    :pdf="src"
    :fileName="fileName"
    @pages-rendered="pagesRendered"
    v-bind="$attrs"></VuePdfApp>
</template>
<style lang="less" scoped>
@themeColor: #1677FF;
:deep(*) {
  box-sizing: content-box;
}
// 定制化主题色
.pdf-app.dark {
  --pdf-app-background-color: rgb(83, 86, 89);
  --pdf-sidebar-content-color: rgb(51, 54, 57);
  --pdf-toolbar-sidebar-color: #24364e;
  --pdf-toolbar-color: rgb(50, 54, 57);
  --pdf-loading-bar-color: #606c88;
  --pdf-loading-bar-secondary-color: @themeColor;
  --pdf-find-results-count-color: #d9d9d9;
  --pdf-find-results-count-font-color: #525252;
  --pdf-find-message-font-color: #a6b7d0;
  --pdf-not-found-color: #f66;
  --pdf-split-toolbar-button-separator-color: #fff;
  --pdf-toolbar-font-color: #d9d9d9;
  --pdf-button-hover-font-color: @themeColor;
  --pdf-button-toggled-color: #606c88;
  --pdf-horizontal-toolbar-separator-color: #fff;
  --pdf-input-color: #606c88;
  --pdf-input-font-color: #d9d9d9;
  --pdf-find-input-placeholder-font-color: @themeColor;
  --pdf-thumbnail-selection-ring-color: hsla(0,0%,100%,.15);
  --pdf-thumbnail-selection-ring-selected-color: rgb(147, 179, 242);
  --pdf-error-wrapper-color: #f55;
  --pdf-error-more-info-color: #d9d9d9;
  --pdf-error-more-info-font-color: #000;
  --pdf-overlay-container-color: rgba(0,0,0,.2);
  --pdf-overlay-container-dialog-color: #24364e;
  --pdf-overlay-container-dialog-font-color: #d9d9d9;
  --pdf-overlay-container-dialog-separator-color: #fff;
  --pdf-dialog-button-font-color: #d9d9d9;
  --pdf-dialog-button-color: #606c88;
  :deep(.thumbnail.selected>.thumbnailSelectionRing) {
    background-color: rgb(147, 179, 242);
  }
}
/* for light theme */
.pdf-app.light {
  --pdf-app-background-color: rgb(245,245,245);
  --pdf-sidebar-content-color: rgb(245,245,245);
  --pdf-toolbar-sidebar-color: rgb(190,190,190);
  --pdf-toolbar-color: rgb(225,225,225);
  --pdf-loading-bar-color: #3f4b5b;
  --pdf-loading-bar-secondary-color: #666;
  --pdf-find-results-count-color: #3f4b5b;
  --pdf-find-results-count-font-color: hsla(0,0%,100%,.87);
  --pdf-find-message-font-color: hsla(0,0%,100%,.87);
  --pdf-not-found-color: brown;
  --pdf-split-toolbar-button-separator-color: #000;
  --pdf-toolbar-font-color: rgb(142,142,142);
  --pdf-button-hover-font-color: #666;
  --pdf-button-toggled-color: #3f4b5b;
  --pdf-horizontal-toolbar-separator-color: #000;
  --pdf-input-color: #3f4b5b;
  --pdf-input-font-color: #d9d9d9;
  --pdf-find-input-placeholder-font-color: #666;
  --pdf-thumbnail-selection-ring-color: hsla(208,7%,46%,.7);
  --pdf-thumbnail-selection-ring-selected-color: #3f4b5b;
  --pdf-error-wrapper-color: #f55;
  --pdf-error-more-info-color: #d9d9d9;
  --pdf-error-more-info-font-color: #000;
  --pdf-overlay-container-color: hsla(208,7%,46%,.7);
  --pdf-overlay-container-dialog-color: #6c757d;
  --pdf-overlay-container-dialog-font-color: #d9d9d9;
  --pdf-overlay-container-dialog-separator-color: #000;
  --pdf-dialog-button-font-color: #d9d9d9;
  --pdf-dialog-button-color: #3f4b5b;
  :deep(.thumbnail.selected>.thumbnailSelectionRing) {
    background-color: rgb(105, 105, 105);
  }
}
</style>

③在要使用的页面引入:文章来源地址https://www.toymoban.com/news/detail-419912.html

<script setup lang="ts">
import PDFViewer from './PDFViewer.vue'
// import PDFSrc from '@/assets/files/Markdown.pdf'

// const PDFSrc = new URL('@/assets/files/Markdown.pdf', import.meta.url).href
// pdf document pages are rendered. Can be used to set default pages scale

const PDFSrc = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf')

function onLoaded (pdfApp: any) {
  console.log('loaded app:', pdfApp)
}
</script>
<template>
  <div>
    <h1>vue3-pdf-app 参考文档</h1>
    <ul class="m-list">
      <li>
        <a class="u-file" href="https://www.npmjs.com/package/vue3-pdf-app" target="_blank">vue3-pdf-app</a>
      </li>
    </ul>
    <h2 class="mt30 mb10">PDFViewer 基本使用</h2>
    <PDFViewer
      page-scale="page-fit"
      :width="800"
      :height="700"
      theme="dark"
      :src="PDFSrc"
      @loaded="onLoaded" />
  </div>
</template>

到了这里,关于Vue3PDF预览(vue3-pdf-app)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!

    先上效果图    插件安装 先说 word 文件是docx-preview插件           excel文件是用 xlsx 插件     介绍后端返回的数据 因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含: url :  blob对象转换的用于访问 Blob 数据的临时链接。这个链接可以被用于

    2024年02月07日
    浏览(84)
  • vue3管理系统中后台返回pdf格式的文件流,前端如何预览?以及uniapp微信小程序中后台返回的base64位的pdf文件如何预览?

    后台返回的是base64格式的pdf文件,首先需要解析base64文件的插件 image-tools 1 安装并引入插件 2 封装预览pdf的函数 3 调用接口获取数据

    2024年01月18日
    浏览(83)
  • vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

    效果如图 直接看代码吧 template部分 css部分 js部分

    2024年02月11日
    浏览(80)
  • Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

    pnpm i pdfjs-dist@2.5.207

    2024年01月18日
    浏览(72)
  • 前端vue3实现本地及在线文件预览(含pdf/txt/mp3/mp4/docx/xlsx/pptx)

    (一)微软office免费预览( 推荐 ) 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 (二)XDOC文档预览云服务  移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 本地或内网预览需要借助插件实现,pdf、mp3、mp4等主要靠原生标签或浏览器自带功能,尽量减少

    2024年02月05日
    浏览(71)
  • Vue3导出pdf方案

    1.引入两个依赖 2.在utils文件夹下新建htmlToPdf.js文件 扩展 :还可以传多个不同容器id 3.来到需要将vue转成pdf的页面 methods: 扩展 :多个容器不同id 介绍一下纯jspdf用法,将一个图片列表导出为pdf文件,根据图片宽高计算在pdf中的位置 jsPDF 是一个基于 HTML5 的客户端解决方案,用于

    2024年02月16日
    浏览(35)
  • vue3 ts 导出PDF jsPDF

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。 1、安装:npm install jspdf                  npm install --save html2canvas 2、引入:import jsPDF from \\\"jspdf\\\"                  import html2canvas from \\\'html2canvas\\\' 3、使用

    2024年02月05日
    浏览(38)
  • vue3 如何将页面生成 pdf 导出

    原文链接:vue3 如何将页面生成 pdf 导出 最近工作中有需要将一些前端页面(如报表页面等)导出为 pdf 的需求,博主采用的是 html2Canvas + jspdf 。 请阅读 vue3 如何将页面生成 pdf 导出

    2024年02月16日
    浏览(44)
  • Vue3 -- PDF展示、添加签名(带笔锋)、导出

    实现功能的时候采用了两个方案,主要是第一个方案最后的实现效果并不太理想,但实现起来比较简单,要求不高时可以使用。 该 DEMO 会一次性加载并展示所有的 PDF 页面,目的是方便在手机上观看时上下滑动,如果要做成上一页下一页的效果,需要自行实现。 我是用开源项

    2024年02月04日
    浏览(29)
  • vue3项目打开本地pdf文件实现方法

    效果图 引入pdf插件 注意一定要这个版本,不然会报错 key.split(...).at is not a function pdf页面封装 pdf存放目录 具体实现就这么多,欢迎来吐槽! 结语 一个人久了连喜欢上一个人都好难,不要轻易地拒绝学习新知,因为你所拒绝的不是别人,而是你自己的成长之路。

    2024年02月12日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包