如何预览以及下载pdf文件
前言
前端操作文件流是一项比不可少的技能
今天我们来使用blob
来进行pdf
文件的预览以及下载
话说没有demo的代码不是好代码
知识点
blob
Common_types 常见 MIME 类型列表
createObjectURL
预览pdf
预览pdf
可以借助iframe
的src
属性来传入blob文件流以达到预览的目的
html
<iframe src="" id="iframe" frameborder="0"></iframe>
js
function loadpdf() { axios({ method: 'get', url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf', responseType: 'blob', }).then(function (response) { let blob = new Blob([response.data], { type: response.data.type }) let url = URL.createObjectURL(blob) document.getElementById('iframe').src = url }) }
- 注意事项
responseType
务必指定为blob
new Blob
文件类型可以写为response.data.type
或者参考MINE类型列表
写为application/pdf
下载pdf
下载pdf
我们借助于URL.createObjectURL()
静态方法会创建一个 DOMString
通过a标签
来进行下载
function dowanloadpdf() {
axios({
method: 'get',
url:
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
responseType: 'blob',
}).then(function (response) {
const link = document.createElement('a')
let blob = new Blob([response.data], { type: response.data.type })
let url = URL.createObjectURL(blob)
link.href = url
link.download = '前端工程师必备技能.pdf'
link.click()
})
}
以上就是pdf的预览以及下载的简单实现方法,你还有更好的方法吗?可以分享出来供大家学习一下🍺
交流群
被 9 篇内容引用
推荐阅读
Vue修改代理无需重启项目解决方式
在使用 vue-cli3 创建项目时,如果在 vue.config.js 中配置了代理,那么在开发环境下,每次修改代理配置后都需要重启项目才能生效,这样就会造成开发效率的降低,因此需要解决这个问题。
JenK赞 3阅读 822
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json
谭光志赞 34阅读 20.8k评论 9
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 32阅读 7.3k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 24阅读 2.3k评论 3
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 25阅读 1.7k评论 1
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 2k
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.9k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。