前言 因为业务需要，很多文件需要在前端实现预览，今天就是了解一下吧。 实现方案 找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。 文档格式 老的

开源的pdf文档读取解析插件。 可定制功能，完全脱离浏览器的依赖，web渲染pdf引擎。兼容IE9+ web路径下是查看器程序。 web/viewer.js 中 HOSTED_VIEWER_ORIGINS配置generic预览地址，防止产生跨域问题造成预览报错。

有时候我们要切换预览 pdf, 于是借鉴了一些方法，自己封装了一个组件来使用。 vue 使用 vue-pdf 来实现预览 pdf 的功能感觉是最简单的解决方案了。

引用vue-pdf插件，本地路径没有问题，主要解决跨域问题，通过服务器端返回二进制文件生成本地url完成。 如下代码，请求后端设置返回响应类型为blod类型，服务端直接使用file_get_contents()返回文件的内容。

今天产品提出一个优化的需求，就是之前我们做的图片展示就是一个img标签搞定，由于我们做的是海外后台管理系统，那边的人上传的文件时pdf格式，vue本事是不支持这种格式文件展示的，于是就google搜索，发现有iframe、embed、vueshowpdf(测试了不咋好用)、pd…

需求及引言 最近在项目中，因为有一处需求，需要预览图片/PDF文件，Vue项目，索性采用了element-ui的dialog组件来展示文件。 图片预览很简单，直接在dialog组件放置一张图片，加入u

pdfjs-dist + canvas渲染页面提示多次render操作使用了相同canvas画布问题

之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找…

引用pdf-dist npm install pdf-dist(注意固定版本号) package.json版本号详解 ～匹配最近小版本依赖包，比如～1.2.3会匹配所有1.2.x版本，但不包括1.3.