vue 下载pdf

1、html

javascript 复制代码
   <div class="down" @click="down(dataurl)">
         <img src="~assets/images/reportsModule/下载.png" alt="">
         <span style="padding-left: 5px;">立即下载</span>
      </div>

dataurl 是路径

2、methods

javascript 复制代码
  // 下载pdf
     download(url){
          const link = document.createElement("a");
          // 这里是将链接地址url转成blob地址,
          fetch(url)
          .then((res) => res.blob())
          .then((blob) => {
               link.href = URL.createObjectURL(blob);
               // 下载文件的名称及文件类型后缀
               link.download = "文件";
               document.body.appendChild(link);
               link.click();
               //在资源下载完成后 清除 占用的缓存资源
               window.URL.revokeObjectURL(link.href);
               document.body.removeChild(link);
          });
     },
   // 下载pdf
     down(e){
          let obj = {
               type: 3,
               path: e
          }
          接口(参数).then(res => {
             this.download(e)
          }).catch(err =>{
               console.log(err)
          })
     },
相关推荐
托比-马奎尔10 分钟前
ES6变量与解构:let、const与模板字符串全解析
javascript
水煮白菜王1 小时前
从零搭建 React 工程化项目
前端·javascript·react.js
mosen8681 小时前
易混淆的CommonJS和ESM(ES Module)及它们区别
javascript·node.js·express
weixin_516875654 小时前
力扣 30 天 JavaScript 挑战 第37天 第九题笔记 知识点: 剩余参数,拓展运算符
javascript·笔记·leetcode
明月与玄武4 小时前
Vue 3 高性能实践 全面提速剖析!
前端·javascript·vue.js
童先生8 小时前
Nginx + Vue/React 前端 + API:防止路径混淆漏洞与跨域问题实战分享
前端·vue.js·nginx
黑夜照亮前行的路9 小时前
JavaScript 性能优化实战技术指南
javascript·性能优化
Stringzhua10 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
耘田11 小时前
Markdown to PDF/PNG Converter
pdf
乐~~~11 小时前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui