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()
相关推荐
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef067 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder9 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句9 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom9 小时前
JavaScript reduce()函数详解
javascript
小飞悟10 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子10 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手10 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript