Vue 图片、PDF预览（Blod数据类型）

简单的PDF/图片预览

请求接口

需要将后端返回的文件转为文件流
这里的请求用的axios封装的也可以用原生的注意设置responseType: "blob"

axios.request({headers: { "content-type": "multipart/form-data" },url: URL,//请求数据的接口 这里根据个人需求修改method: "get",withCredentials: true,timeout: 120000,//请求响应时间responseType: "blob"//MDN api参考 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType}).then(function(response) {let reader = new window.FileReader();let data = response.data || JSON.parse(response.request.responseText);reader.readAsArrayBuffer(data);reader.onload = function(e) {const result = e.target.result;// const contentType = data.type;// 生成blob图片/PDF,需要参数(字节数组, 文件类型)const blob = new Blob([result], { type: "application/pdf" });// 使用 Blob 创建一个指向类型化数组的URL//MDN api参考 https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURLtry {that.pdfUrl = window.URL.createObjectURL(blob);} catch (error) {console.log(error);}};
}).catch(() => {this.$message.error("预览失败！");
});

html

 <div :style="{ height: '80vh', minHeight: '600px', margin: '8px 0px' }"><iframe:src="pdfUrl"id="previewPdf"frameborder="0"style="width: 100%; height: 100%"></iframe>
</div>

图片预览

参考：点击链接 MDN讲解比较详细

Vue 图片、PDF预览（Blod数据类型）相关推荐

VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
PDF预览插件 1.安装插件(vue-pdf) 2.引用注册pdf组件 3.pdf 常用属性与方法调用 4.常见报错 1.安装插件(vue-pdf) npm i pdfjs-dist@2.5.207 ...
Vue中Pdf预览及打印(自定义组件)
思路: 1. vue中使用ifream访问后台 2.封装共用vue组件 3.后台通过freemaker模板生成相应pdf 效果: 编写自定义组件PdfView.vue <template> ...
vue+element pdf预览
demo 链接:https://pan.baidu.com/s/1g05Jsi4th-LpiHooOLjPAg 提取码:7777
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
C# web实现word 转Html、office转Html、pdf转图片在线预览文件
改篇 pdf 预览再本机没问题,发布再iis中不行 ,(使用剪贴板的问题..excel和word 可以,) pdf解决:请看我的博文 ----最终解决篇详细配置及代码 word 转Html 1 / ...

Vue 图片、PDF预览（Blod数据类型）

Vue 图片、PDF预览（Blod数据类型）

请求接口

html

图片预览

Vue 图片、PDF预览（Blod数据类型）相关推荐

最新文章

热门文章