首页 > 其他分享 >Vue 引入PDF文件预览,可下载,插件vue-pdf

Vue 引入PDF文件预览,可下载,插件vue-pdf

时间:2023-03-16 18:12:31浏览次数:44  
标签:插件 Vue 预览 vue PDF pdf

最近的一个项目中用到了读取本地文件PDF,先是用了PDF 组件, 没有达到想要的效果,后来查找官网用iframe标签来替代PDF 组件, 达到想要的效果了, 

1、第一步先安装 vue-pdf插件

在命令行中输入: npm install --save vue-pdf

 2、第二步, 在需要的页面引入vue-pdf

<template>
  <div class="pdf" style="width: 100%; height: 100%">
    <iframe :src="src" frameborder="0" style="width: 100%; height: 100%"></iframe>
  </div>
</template>
<script>
  import pdf from 'vue-pdf';
  export default {
    data() {
      src: '../test.pdf'
    },
    components: {
      pdf
    },
  }

</script>

<style>

</style>

  

  OK 完成

标签:插件,Vue,预览,vue,PDF,pdf
From: https://www.cnblogs.com/weiqinlu/p/17222591.html

相关文章

  • Vue.js 条件渲染
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>条件渲染</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......
  • vue3 动态获取 img中的src地址
      vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上hash值,但是直接通过:src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以正常引......
  • vue中使用wangeditor
    项目中用到了富文本框,选来选去选择了wangeditor,先写了demo,用起来还算比较简单用法安装npminstall@wangeditor/editor--savenpminstall@wangeditor/editor-for-vu......
  • vuex TypeError: Cannot read properties of undefined (reading ‘dispatch‘)
      1、入口文件main.js  2、或者版本不匹配 vue2安装3版本的vuex,默认安装的4版本给vue3用//卸载原来安装的vuexnpmuninstallvuex//安装3.6.2版本的vuexnpm......
  • 【Pycharm】一些Pycharm好用的插件
    本文记录一些好用的pycharm插件,后续碰到好用的继续更新。RequirementsHomepage:https://plugins.jetbrains.com/plugin/10837-requirements一键部署环境利器通过require......
  • 新版谷歌Chrome取消对PPAPI插件支持后,浏览器网页打开编辑保存微软Office、金山WPS文档
    最近陆续看到一些大学发布公告,谷歌Chrome取消了对PPAPI插件支持,导致某些在线Office厂家产品将无法在谷歌Chrome107及以上版本运行,被迫更换浏览器或者使用低版本浏览器苟延......
  • vue使用antd-vue框架
    1、首先用npm安装npmi--saveant-design-vue2、在main.js中添加引用import{createApp}from'vue';importAntdfrom'ant-design-vue';importAppfrom'./......
  • ruoyi-vue启动报错error:03000086:digital envelope routines::initialization error
    原因分析可能是因为node是最新版本导致ERR_OSSL_EVP_UNSUPPORTED错误SSL数字信封不支持解决措施(ps:网上找的)setNODE_OPTIONS=--openssl-legacy-provider亲测并......
  • Vue中组件通信方式
    组件通信方式:我们学习过的组件通信方式第一种:props:父子组件通信注意事件:如果父组件给子组件传递数据(函数),本质其实是子组件给父组件传递数据如果父组件给子组件传递的数......
  • vue与jquery两种方式实现手风琴动效
    1.jquery方式实现点击事件动效<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>jquery主页手风琴动效</title><scriptsrc="h......