vue下運用 pdf.js 預覽 和 打印 PDF文檔 兼容React

2023年8月1日 254次阅读 来源: huangkaiqiao

我運用前端開闢框架是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
    原文作者：huangkaiqiao
    原文地址: https://segmentfault.com/a/1190000015197340
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞