vue+antd实现PDF预览(后端返回的是文件流)
操作步骤:
第一步:下载包 npm install --save vue-pdf
第二步:导入组件

第三步:使用pdf标签进行展示,showUrl指的是访问路径

第四步:定义要用到的变量

第五步:处理文件流,转换成地址


最终效果:图一是我加的一个loading描述,图二是效果。


vue+antd实现PDF预览(后端返回的是文件流)的更多相关文章
- Android原生PDF功能实现:PDF阅读、PDF页面跳转、PDF手势伸缩、PDF目录树、PDF预览缩略图
1.背景 近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开发的 ...
- Pdf预览功能实现(asp.net)
asp.net中使用 1.pdf预览功能实现的插件是pdfjs-1.5.188-dist //引入插件中相关的文件以及jquery文件 @section css{ <link rel=" ...
- PDF预览之PDFObject.js总结
get from:PDF预览之PDFObject.js总结 PDFObject.js - 将PDF嵌入到一个div内,而不是占据整个页面(要求浏览器支持显示PDF,不支持,可配置PDF.js来实现 ...
- 浏览器实现PDF预览
1.使用jquery.media.js预览PDF <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- Atitit.pdf 预览 转换html attilax总结
Atitit.pdf 预览 转换html attilax总结 1. Swf flash还是html1 2. pdf2htmlEX1 3. iText 5.5.0 发布,Java 的 PDF 操作类库1 ...
- ABAP FORM打印转PDF/pdf 预览
function ZSTXBC_SSFCOMP_PDF_PREVIEW. *"-------------------------------------------------------- ...
- Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框
场景 FastReport安装包下载.安装.去除使用限制以及工具箱中添加控件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- 预览github项目的html文件新方法
原文地址:→看过来 写在前面 关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的. 踩坑经历 搜出来的结果大概 ...
- vue文件流转换成pdf预览(pdf.js+iframe)
参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端 ...
- 使用pdf.js预览实现读取服务器外部文件
不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的 接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件 ...
随机推荐
- nodejs查询
const tagModel = require("../mongodb"); 1 const mongoose = require("mongoose"); ...
- shell 脚本实现二进制安装 LAMP 架构的 wordpress
#!/bin/bash##***********************************************************************#Author: ...
- [3] ScanRefer论文精读 3DVisual Grounding开山之作
论文名称:ScanRefer: 3D Object Localization in RGB-D Scans using Natural Language 这篇文章最主要的工作,我觉得是两个,第一,提出 ...
- windows安装和重装系统后无法识别U盘
安装系统的方法: 1. 方案一,用大白菜制写入pe系统,但必须先准备Windows安装包 方案二,把ISO格式的系统安装包直接写入到u盘,写入U盘的方法请百度 2.开机看到电脑的logo后,按f2(不 ...
- 剑指 Offer II 二分查找
068. 查找插入位置 class Solution { public: int searchInsert(vector<int>& nums, int target) { int ...
- List集合拆分为多个List
List切分为多个List 使用SubList实现分批处理 // 创建模拟list List<Integer> dataList = new ArrayList<>(); fo ...
- docker 安装 elasticsearch7.6.2 kibana7.6.2
[root@abcdefg bin]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 6896f6e3202c ...
- eccodes 使用girb_filter工具
参考自ECMWF网站https://confluence.ecmwf.int/display/OPTR/ecCodes%3A+GRIB+and+BUFR+data+decoding+and+encod ...
- 动态规划-3-RNA的二级结构
/*状态转移方程: OPT(i , j)= max(OPT(i , j − 1) , max( 1+OPT(i , t − 1)+OPT(t + 1, j − 1))), where the max ...
- mac 编译安装ffmpeg
下载源码: https://ffmpeg.org/download.html 解压, ./configure --disable-x86asm --prefix=/usr/local/ffmpeg_m ...