1.运行Vue指令,安装相对应插件。(在指定的Vue文件下运行)
npm install downloadjs
2.其次在项目中引入安装相对应的插件(不引入是无法使用导入功能的)
import download from "downloadjs";
3.下载方法的具体代码描述。(下载PDF代码和自定义名字命名进行导出PDF的代码)
- function down() {
-
- var fileName = "自定义文件命名哦"
- var url = state.source; //文件来源(URL或者本地文件路径state.source)
-
-
- // 请求进来,就可以加在loading
- fetch(url).then(res => {
- return res.blob()
- }).then(blob => {
- // 这是一个外部引用的download.js文件,这个文件
- download(blob, fileName)
- // 下载结束,loading结束
- }).catch(err => {
- console.log(err)
- return false
- }).finally(res => {
- // 这里也可以结束loading。不管是成功失败,都会结束loading
- return true
- })
- }
总结(直接复制整体根据直接代码环境和框架微微修改一下即可完成):
- <template>
- <button @click="down">当前文档导出button>
- template>
- <script setup lang="ts">
- import download from "downloadjs";
-
-
- // 下载PDF区域
- function down() {
-
- var fileName = "自定义文件命名哦"
- var url = state.source; //文件来源(URL或者本地文件路径)
-
- // 请求进来,就可以加在loading
- fetch(url).then(res => {
- return res.blob()
- }).then(blob => {
- // 这是一个外部引用的download.js文件,这个文件
- download(blob, fileName)
- // 下载结束,loading结束
- }).catch(err => {
- console.log(err)
- return false
- }).finally(res => {
- // 这里也可以结束loading。不管是成功失败,都会结束loading
- return true
- })
- }
- script>
Composition API(组合api)
。 setup配置
。ref与reactive
。watch与watchEffect
。 provide和inject
。 .......
新的内置组件
。 Fragment
。Teleport
。Suspense
其他改变
。新的生命周期钩子
。data选项应始终被声明为一个函数
。移除keyCode支持作为v-on的修饰符