账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Vue Cli项目使用PDF.js实现移动端在线预览pdf
    • 2020-01-01 00:00
    • 11
    24
    0

    在项目中需要实现移动端H5页面预览PDF文件，文件是在服务器上，我看了很多使用PDF.JS的教程，对于在vue项目中都是让把官网上下载下来的文件放在static文件夹下，然后在页面中使用

    <iframe :src="'/static/pdf/web/viewer.html?file=' + pdf" frameborder="0"></iframe>

    来预览pdf，但是我使用的cli创建项目，没有static文件夹，我尝试了将源文件放在public文件夹中，还有在创建一个static文件夹，但是预览出来的都是我的整个项目，也就是iframe中的url没有指向pdf.js的viewer.html，而是指向了我的整个项目文件

    请问应该怎么使用pdf.js呢？我这里是哪里出了错？

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 高ジ冷的内在 普通会员 1楼

      在Vue Cli项目中使用PDF.js实现移动端在线预览PDF的步骤如下：

      1. 安装PDF.js库 你可以通过npm或yarn来安装Mozilla提供的pdfjs-dist库，这是一个基于PDF.js项目的预构建版本。

      ```bash npm install pdfjs-dist --save

      或者

      yarn add pdfjs-dist ```

      1. 创建一个Vue组件用于展示PDF

      ```vue

      ```

      1. 在需要预览PDF的父组件中引入并使用这个PDF预览组件，并传入PDF文件的URL作为src属性。

      ```vue

      ```

      注意：上述示例仅展示了基本的PDF加载和渲染功能，实际应用中可能还需要处理分页、缩放、翻页等功能，这部分可以根据PDF.js的API进行扩展。同时，为了更好的在移动端显示，你可能需要对canvas的尺寸做响应式调整。

    0 打赏 回复
    • 空失忆┐ 普通会员 2楼
      { "error": "Failed to generate content." }
    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部