pdf格式文件下载不预览,云存储的跨域解决

需求背景

后端接口中返回的是pdf文件路径比如:

pdf文件路径https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf)

前端适配是这样的

html 复制代码
 <a
        href="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf"
      >
        超链接预览pdf
      </a>

点击后预览

但是客户方要求不预览点击后直接下载

示例演示pdf下载 - 码上掘金

项目准备

有pdf链接的可以跨过该阶段

准备一个线上的pdf文件链接

登陆阿里云平台

  1. 点击又上角的控制台
  1. 点击左上角的三道杠图标
  1. 点击左侧的对象云存储oss
  1. 点击bucket
  1. 创建 bucket
  1. 创建成功后
  1. 上传文件

点击红框处

点击上传文件

  1. 上传完成后为了方便访问可以把文件的访问属性修改为公共的

到这里文件链接就创建好了,可以直接复制链接访问

解决文件链接跨域问题

点击数据安全中的跨域设置

规则设置

设置完成后就可以随意访问了啦

实现(js)

HML

html 复制代码
<!DOCTYPE html>
<html lang="CH-EN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下载</title>
  </head>
  <body>
    <div class="content">
      <a
        href="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf"
      >
        超链接预览pdf
      </a>

      <button id="btn" type="submit" onclick="download()">点击下载pdf</button>
    </div>
  </body>
</html>

script

javascript 复制代码
<script>
  const filePath =
    "https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf";
  //  fileName是pdf名称 、filePath是pdf地址
  function downloadFil(fileName, filePath) {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", filePath, true);
    ajax.responseType = "blob";
    ajax.onload = (e) => {
      console.log(e);
      let res = e.target.response;
      let blob = new Blob([res]);
      let aLink = document.createElement("a");
      aLink.download = `${fileName}.pdf`; // 下载文件的名字
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    };
    ajax.send();
  }
  function download() {
    downloadFil("test", filePath);
  }
</script>

style

css 复制代码
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content {
    height: 300px;
    width: 500px;
    border: solid #ddd 1px;
    text-align: center;
    padding: 20px;
  }
  .content input {
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    border: 1px solid #dcdfe6;
  }
  .content input:focus {
    outline: none;
    border-color: #409eff;
  }
  .content input:focus-visible {
    outline-offset: 0px;
  }
</style>

实现(vue)

downloadjs

github地址:https://github.com/rndme/download

安装

npm install downloadjs -S

导入

import download from "downloadjs"

使用

download(url, strFileName, strMimeType);

download第一个参数为URL,第二个参数为文件名称,第三个参数文件类型,url必填,另外两个选填

遇到的问题

1.下载的文件打不开,且大小不对 // 中文名称文件下载 download(encodeURI(URL))

2.不能自定义名称

在URL进行转码后虽然可以下载PDF文件了,但名称却是转码后的名称,而不是原本的名称,这时我们用第二个参数进行命名时,名称是对了,可文件却出现打不开,大小不对的情况,暂时没找到解决方法。

file-saver

github地址:https://github.com/eligrey/FileSaver.js

该库是我之前写页面转PDF时使用到的库,既然之前可以保存pdf文件,那现在是不是也可以呢,上网一搜还真可以

安装

npm i file-saver

使用

javascript 复制代码
const that = this
var oReq = new XMLHttpRequest()
var URL= '' // URL 为URL地址
oReq.open('GET', URL, true)
oReq.responseType = 'blob'
oReq.onload = function() {
  var file = new Blob([oReq.response], {
    type: 'blob'
  })
  FileSaver.saveAs(file, that.name) // that.name为文件名
}
oReq.send()
相关推荐
new出一个对象2 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥3 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
CodeCraft Studio5 小时前
【实用技能】使用 TX Text Control 创建带有嵌入式附件的 PDF 文档
pdf·asp.net·.net
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒7 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪7 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背7 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M8 小时前
node.js第三方Express 框架
前端·javascript·node.js·express