vue下使用 pdf.js 预览 和 打印 PDF文档 兼容React

我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过直接打开pdf文件, 但事实上直接打开pdf文件的表现不太好.如果是在 win7+ie11 的环境下会直接下载文件, 而且直接打开pdf在 ie,firefox,chrome 三大环境下的表现都不太统一. 所以根据需求, 我最开始使用了vue-pdf

  1. 安装vue-pdf

    npm install --save vue-pdf

  2. 新建一个vue,命名为vpdf

<template>
  <pdf src="./static/relativity.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

3.引入到需要预览的页面使用vpdf标签

import vpdf form 'vpdf';
components: {
    vpdf
}

4.npm start 启动

使用vue-pdf很简单, 但是只能预览pdf不能打印,所以我放弃了这个思路.

接下来我尝试了 PDF.js

1.获取当前版本

git clone https://github.com/mozilla/pdf.js.git 

2.启动

cd pdf.js
npm install -g gulp-cli
npm install
gulp server

3.访问 http://localhost:8888/web/viewer.html 可以预览和打印pdf,但是这时候要加入到自己的项目,就要编译pdf.js 4.编译

build pdf.js 
gulp generic //在src文件夹获取开发版
gulp minified //获取生产版

5.vue-router路由

在vue下直接使用使用pdf.js的viewer.html有一个路径映射的问题,就是在服务器加载不出来,虽然可以把html改成vue模板加载,但是为了省事,我直接把编译好的min文件夹放在了static路径

6.通过带参数的url来访问PDF

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

参考

http://www.cnblogs.com/kagome2014/p/kagome2014001.html
http://blog.csdn.net/hyhbyl/article/details/20994945
原文链接:segmentfault.com

上一篇:el-input、el-select、el-autocomplete获取焦点 input输入框为空时高亮
下一篇:我去!又是勇士和骑士?--NBA资讯小程序

相关推荐

  • (HTML)下载PDF文件,而不是在浏览器中单击时打开它们。

    MikeD404Error提出了一个问题:(HTML) Download a PDF file instead of opening them in browser when clicked,或许与您...

    3 年前
  • 预览图像上传之前

    JustinSimbian提出了一个问题:Preview an image before it is uploaded,或许与您遇到的问题类似。 回答者Paolo ForgiaIvan Baev给出了...

    3 年前
  • 那些令人窒息的操作- 如何在设置浏览器打开 excel,pdf, 等...

    打开文件的方法有很多,但是似乎都是要引入插件之类的,再者就是直接用iframe 直接更换地址,但是,最近在某个大厂,他门用了一个很奇怪的方法(可能是我太菜了,没想过这种用法),感觉很简单 ...

    5 个月前
  • 跨平台(uni-app)文件在线预览解决方案

    1024刚过,也祝愿各位码友在今后生活中,身体健康,事事顺心,再无Bug。 一、前言 之前写过一篇文章关于上传目录文件:uni-app系统目录文件上传(非只图片和视频)解决方案,这次来解决文件预览问...

    1 年前
  • 纯JavaScript实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。

    4 年前
  • 纯JS实现本地图片预览的方法

    本文实例讲述了纯JS实现本地图片预览的方法。分享给大家供大家参考。具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的。就拿自己以前写的写了一个。代码比较简洁,引用了一个我之前写的js...

    4 年前
  • 简化版手机端照片预览组件

    可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。

    4 年前
  • 移动端Vue.js的图片预览组件,支持放缩、滑动功能!

    功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏。 注:touch事件请手机预览 文档地址http://www.ml-ui.com/#/docs/i... 组件参数 da...

    3 年前
  • 直接从JavaScript打印PDF

    Craig Celeste提出了一个问题:Print PDF directly from JavaScript,或许与您遇到的问题类似。 回答者Communitynullability给出了该问题的处...

    3 年前
  • 用javascript生成PDF文件

    Xufoxamoeba提出了一个问题:Generating PDF files with JavaScript,或许与您遇到的问题类似。 回答者Joeytje50James Hall给出了该问题的处理...

    3 年前

官方社区

扫码加入 JavaScript 社区