vue项目预览pdf功能(解决动态文字无法显示的问题)

这篇具有很好参考价值的文章主要介绍了vue项目预览pdf功能(解决动态文字无法显示的问题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)

先看效果:

        vue项目预览pdf功能(解决动态文字无法显示的问题),pdf,前端,javascript,vue.js

 这个插件支持自定义功能,唯一的缺点就是有点庞大,其他的就很完美了。

········我先简单来说一下设计思路吧,将查看pdf的这个页面写成一个组件,然后将组件绑定一个路由,当我们在列表页点击查看pdf功能时,将pdf的地址通过路由传入到我们的查看pdf的组件当中,然后在组件中使用插件,从而渲染我们的pdf文件

按照下面的步骤开始进行操作

1,创建一个新的预览pdf的组件

<template>
    <div class="table-container">
        <!-- <PDF :src="url"  :disableFontFace="true"/> -->
        <!-- <vue-pdf-embed :source="{
    cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
    url: url,
  }"/> -->
        <!-- <PdfViewer v-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components/pdfjsDistPath'" ></PdfViewer>
        <pdf v-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components'" /> -->
        <iframe :src="'static/pdf/web/viewer.html?file=' + url + '#page=1'" style="width: 100%; height: 100%"></iframe>  <!--!!!!注意这里,这里需要注意的地方有2个,第一个是我们的url,这个就是我们要预览的pdf的地址,第二个是#page=1 ,这个是打开时默认先展示第一页 -->
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
// import pdf from '../../components/pdf/pdf'

// import PDF from "pdf-vue3";

// Plus
export default defineComponent({
    name: 'showpdf',
    directives: {
    },
    components: {},
    setup() {
        const route = useRoute()
        let url = ref()
        onMounted(() => {
            url.value = route.query.url
            // getNumPages(route.query.url)
        })
        // 思考 ref 响应式和 reactive 响应式的区别; 修改对象属性值,是否会刷新数据
        return {
            url
        }
    }
})
</script>
<style lang="stylus" scoped>
    .table-container{
        height: 100%;
        overflow: scroll;
    
    }
    </style>
    

基本上稍微懂一点vue应该就能到上方代码的写法,这里就不多赘述了,有些要注意的地方会加上注释

1,当创建好vue文件后,将该vue文件绑定在路由上

vue项目预览pdf功能(解决动态文字无法显示的问题),pdf,前端,javascript,vue.js

 3,我们在列表页获取到的pdf地址,通过路由传递到我们的pdf查看组件里。

       const examine = (item: any) => {
            router.push({
                path: '/report/showpdf',
                query: { url: item.fileUrl }
            })

4.在pdf路由组件里接收,并调用pdf查看器插件

vue项目预览pdf功能(解决动态文字无法显示的问题),pdf,前端,javascript,vue.js

 5.结尾

后续我们把文件上传到csdn里,供大家免费下载,如果出现下载需要条件的情况下,可以直接私聊我,获取pdf预览查看,当要使用插件时,一定要阅读放插件文件夹里的提示文档!!文章来源地址https://www.toymoban.com/news/detail-664631.html

到了这里,关于vue项目预览pdf功能(解决动态文字无法显示的问题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue 项目中实现pdf预览 pdf打印 pdf下载

    在Vue项目中实现PDF预览、打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件。 可以使用npm安装pdf.js,命令如下: npm install pdfjs-dist --save 创建一个PDF组件 在Vue项目中,可以创建一个PDF组件,用于显示PDF文件。 可以使用pdf.js提供

    2024年02月13日
    浏览(68)
  • vue2实现二进制流pdf浏览器预览功能

    该方法不需要使用插件  获取后端二进制文件流后直接处理 然后点击调用方法使用

    2024年01月20日
    浏览(59)
  • vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

    1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载,复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径  internalPreview(file) { //判断需要预览的地方加 props—pdfView                

    2024年01月19日
    浏览(46)
  • vue项目用后端返回的文件流实现docx和pdf文件预览

    写这篇文章的目的,是因为我比较懒,想把代码记录一下,方便日后使用;哈哈,如果你也需要,也可以复制粘贴啊,为了方便自己和需要的人知道怎么使用,我尽量写的详细一点,没有什么技术难点,就是简单的记录,万一能帮到需要的人呢,也是一件美事; 其实也就是使

    2023年04月20日
    浏览(55)
  • 【Java项目】Vue+ElementUI+Ceph实现多类型文件上传功能并实现文件预览功能

    先说一下我们的需求,我们的需求就是文件上传,之前的接口是只支持上传图片的,之后需求是需要支持上传pdf,所以我就得换接口,把原先图片上传的接口换为后端ceph,但是其实大致的处理流程都差不多,都是上传到后端然后得到url地址。 要实现点击预览文件,那么就需

    2024年02月15日
    浏览(53)
  • java超简单实现文档在线预览功能,支持word\excel\text\pdf\图片等格式转pdf,aspost 转pdf部署linux中文乱码解决方案

    一、背景         在工作中需要对上传到服务器的各种类型包括但不限于word、pdf、excel等文件进行在线预览,前端比较菜搞不定,只能本人亲自上。         网上的经验比较多也比较乱, 有的只有预览,没有文件格式转换,有的也不说linux存在字体问题, 本文会直白的给

    2024年04月10日
    浏览(126)
  • win10系统 pdf 文件无法正常预览

    网上也看了不少办法,修改注册表什么的,太麻烦了,尝试了一下下载Adobe Acrobat Reader,安装后就可以成功预览显示啦!对,就是这么简单!Adobe Acrobat Reader下载链接:link

    2024年01月23日
    浏览(84)
  • pdfH5实现pdf预览功能

    1.引入 2.使用 踩坑指南:建议pdf文件路径和项目路径统一域名,否则会报跨域,也可以后端接口配置一下请求头(这种情况下需要考虑安全问题) 参考文章:GitHub - gjTool/pdfh5: web/h5/移动端PDF预览插件

    2024年02月06日
    浏览(30)
  • 使用插件实现pdf,word预览功能

    效果 代码: 插件地址: https://github.com/501351981/vue-office  这个一定要固定版本,不然线上pdf可能会预览报错

    2024年02月12日
    浏览(41)
  • pdf文件打开后部分文字无法显示

    场景: pdf文件在系统内预览正常,但是下载到本地电脑上,使用wps查看,部分标题会消失,只有标题里面的数字还能显示出来 经过一系列排查,发现查看的电脑上缺失了字体,使用wps查看时,缺失字体没有任何提示,但是使用Acrobat Reader,会提示缺失什么类型的字体。最后网

    2024年02月10日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包