vue预览pdf文件流（vue-pdf使用）

本文目录

• vue-pdf使用
• vue-cli + vue-pdf 依赖 实现本地pdf预览
• vue中预览word、ppt、excel文件
• vue-pdflinux预览空白
• vue-pdf 预览乱码问题
• vue-pdf预览文件横向超出
• vue-pdf预览路径加载时传入的路径变了
• vue-pdf.js 在线预览问题
• vue预览word文档定位行

vue-pdf使用

1.npm install --save vue-pdf
2.使用参考： GitHub - FranckFreiburger/vue-pdf: vue.js pdf viewer
3.打印pdf时中文乱码问题:
需要修改vue-pdf安装包的pdfjsWrapper.js文件
具体修改方法参照： Fix fonts issue in printing by arioth · Pull Request #130 · FranckFreiburger/vue-pdf · GitHub
4.预览时会出现中文不显示： vue-pdf解决显示无法显示中文、中文打印预览乱码_david的博客-CSDN博客_vue-pdf中文不显示
5.接收显示文件流： vue-pdf接收文件流_wusq的博客-CSDN博客_vue-pdf 文件流

vue-cli + vue-pdf 依赖 实现本地pdf预览

将pdf文件放在 public 文件夹 再使用 ’相对路径’ 调用应该是可以的

别忘了 vue.config.js 文件 将 publicPath 的值设置为 ’/’

1.先安装依赖
cnpm install vue-pdf --save-dev

2.在局部引入,使用

《template》

《div class="pdf "   style=’overflow-y:auto;overflow-x:hidden;height:100%;width:100%’》

        《pdf v-for="i in numPages"

             :key="i"

             :page="i"

             :src="pdfUrl"》

        《/pdf》

      《/div》

《/template》

《script》

import pdf from ’vue-pdf’

export default {

data(){

     return {

               pdfUrl: ’’,

               src: ’../../../../12.pdf’, // pdf文件地址

                numPages: 0

              }

         },

 mounted () {

    this.loadPdf()

  },

  methods: {   

    loadPdf () {

      //src为你存放pdf的路径     

      this.pdfUrl = pdf.createLoadingTask(this.src);

      this.pdfUrl.then(pdf =》 {

        this.numPages = pdf.numPages

                            })

                    }

        }

}

vue中预览word、ppt、excel文件

最近发现Office Web Viewer可以在浏览器中查看Office文档，使用方法

***隐藏网址***

vue里面直接定义点击附件事件方法，window.open( )打开即可食用

***隐藏网址***

因为这个是office官方的接口，但毕竟是第三方的，对于在线的机密性文件，有风险隐患。对于公开性文件，没那么机密的可以用这个在线预览。

vue-pdflinux预览空白

vue-pdflinux预览空白替换注释的代码即可。找到pdfjsWrapper.js文件上面替换注释的代码即可。vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

vue-pdf 预览乱码问题

我遇到过以下两种情况的乱码，都是h5（我的项目是嵌入到钉钉内部的，具体网页版没有测试过）：
1、苹果手机正常显示；安卓手机只能显示部分汉字，字母数字都正常。
2、部分pdf文件苹果手机、安卓手机都不显示汉字，乱码。
(备注：这里提一下我的vue-pdf版本是4.1)

1、找到安装的依赖文件夹vue-pdf，把node_modules 》 vue-pdf 》 src 》 pdfjsWrapper.js替换为以下文件内容:

1、引入CMapReaderFactory.js（这个文件也在node_modules 》 vue-pdf 》 src下） 备注：不用关注，只是提一下

2、在执行 pdf.createLoadingTask 方法的时候加入 CMapReaderFactory ，（我的vue-pdf基本用法里有写） pdf的基本用法，点击这里

vue-pdf预览文件横向超出

有以下方法解决：
1、调整页面大小。
2、调整vue-pdf的形式。
3、换一个pdf预览组件。

vue-pdf预览路径加载时传入的路径变了

题主是否想询问“vue-pdf预览路径加载时传入的路径变了的原因有哪些”路径拼写错误，路径变量被修改。
1、路径拼写错误：请检查传入的路径是否正确，包括路径中的拼写、大小写等细节。
2、路径变量被修改：如果是通过变量传入路径，可能是该变量被修改了，导致传入的路径发生了变化。

vue-pdf.js 在线预览问题

最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将src属性赋值为要请求的地址.这就导致一个问题,会直接请求服务器的文件路径地址,而这个服务器文件路径就会暴露出来。处于安全性考虑在预览请求时不再返回地址，改为通过调用普通接口,而是统一返回流（word,pdf）或者base64(jpg,png...)。.前端再进行解析并实现在线预览.

此时遇到第一个问题：

        这个请求是在插件中进行的无法携带项目中封装的各类请求头信息（token..等）。 翻看pdf.js源码及网上总结.发现一个底层方法 

         该方法可传一个对象作为参数,对象内可以添加url(所请求的接口),headers(请求头信息)等.... . 有了这个方法就好处理了.

         最后在将该方法当做变量赋值给pdf的src.大功告成.

         最后再补充一些 : @loaded="docLoaded" @page-loaded ="pageLoaded" 这两个方法为加载预览文件时的loading事件,
最后引一波示例,

vue预览word文档定位行

1 将文件放在前端静态文件中 实现本地预览 但前端包变得很大 多文件不适合
2 通过跳转外网链接访问 但内网无法使用
3 综合考虑 利用浏览器自带的预览pdf 将文件放在服务器指定目录下
前端代码量很少 无需任何插件 只需调用后端接口(将文件转换为流) 内外网均可预览
新建一个vue项目。打开控制命令行程序（CMD），运行命令： vue init webpack “项目名称”
安装依赖，在控制命令行程序（CMD），运行命令：npm install 或者 cnpm install.
实现预览
这里先以word为例。首先运行命令：npm install mammoth，这是预览word的一个插件，必须要安装；在static文件夹下放一个.docx为后缀的word文件
其中引入的三个.js 文件是实现手势缩放、旋转、移动的方法，也可以不引入；
然后修改一下config文件夹下的index.js文件，将host改为0.0.0.0，只要手机和电脑在同一个域名ip下，就可以用手访问项目查看预览效果（ip地址:端口号）
excel、pdf预览都是一样，只是引入的插件不一样
excel预览运行命令：npm install xlsx，页面引入import XLSX from ‘xlsx’
pdf预览运行命令：npm install --save vue-pdf，页面引入import pdf from ‘vue-pdf’
***隐藏网址***