-
2022-04-11 17:06:05
downloadPdf(){ var ajax=new XMLHttpRequest(); ajax.open( "GET", "url地址", true); ajax.setRequestHeader("Cache-Control","no-cache") ajax.setRequestHeader('Access-Control-Allow-Origin', '*'); ajax.responseType = 'blob'; ajax.onload = e =>{ let res = e.target.response; let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据 let aLink = document.createElement("a") aLink.download = “xxxxx"// 下载文件的名字 aLink.href = URL.createObjectURL(blob) aLink.click() } ajax.send() }
更多相关内容 -
vue 下载pdf文件
2019-11-19 16:57:10首先安装依赖 npm install html2canvas jspdf --save 封装方法: // pdfMethod.js ...点这里下载 ...这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出- 首先安装依赖
npm install html2canvas jspdf --save
- 封装方法:
// pdfMethod.js import html2canvas from 'html2canvas' import JsPDF from 'jspdf' const generateResume = (el, name) => { html2canvas(el).then(canvas => { let contentWidth = canvas.width let contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; let pageHeight = (contentWidth / 592.28) * 841.89 //未生成pdf的html页面高度 let leftHeight = contentHeight //页面偏移 let position = 0 //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 let imgWidth = 595.28 let imgHeight = (592.28 / contentWidth) * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let pdf = new JsPDF('', 'pt', 'a4') //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 //避免添加空白页 if (leftHeight > 0) { //添加新页 pdf.addPage() } } } pdf.save(`${name}.pdf`) }) } export default generateResume
- 开始使用:
<template> <div class="priview_resume_container"> <div style="font-size: 30px" @click="getResume">点这里下载</div> </div> </template> <script> export default { name: 'priviewResume', methods: { getResume() { generateResume( document.getElementsByClassName('priview_resume_container')[0], '测试' ) } }, components: {} } </script>
这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出
- 首先安装依赖
-
vue实现在线预览pdf文件和下载(pdf.js)
2020-10-15 22:56:12主要为大家详细介绍了vue实现在线预览pdf文件和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue下载pdf到本地,后端返回文件流
2021-07-07 17:31:10vue项目,axios去请求...//下载用户手册PDF时请求的接口 export const getGuide = (param) => { return request({ url:"请求url", method:"get", params:param, //一定要加responseType responseType: "blobvue项目,axios去请求接口
request文件中代码:
import request from "封装好的axios请求文件" //下载用户手册PDF时请求的接口 export const getGuide = (param) => { return request({ url:"请求url", method:"get", params:param, //一定要加responseType responseType: "blob" }) }
页面中点击下载按钮时,去请求文件流,然后执行下载操作
代码如下:downloadGuide(){ getGuide().then(res => { let blob = new Blob([res], {type: 'application/pdf'}); let downloadElement = document.createElement("a"); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.href = href; downloadElement.download = `用户手册-${this.name}` //下载后的文件名,根据需求定义 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 }) }
-
vue下载本地pdf文件
2020-02-19 14:03:08Vue下载本地pdf文件 html: <button @click="downloadPDf">downloadPDf</button> js: downloadPDf() { axios.post('http://localhost:8080/static/test....Vue下载本地pdf文件
html:
<button @click="downloadPDf">downloadPDf</button>
js:
-
downloadPDf() {
-
axios.post( 'http://localhost:8080/static/test.pdf', {
-
responseType: 'blob', //重要
-
}).then( response => {
-
const url = window.URL.createObjectURL( new Blob([response.data]));
-
const link = document.createElement( 'a');
-
let fname = 'report.pdf';
-
link.href = url;
-
link.setAttribute( 'download', fname);
-
document.body.appendChild(link);
-
link.click();
-
})
-
}
-
}
记住本地文件一定要放在static文件夹下面。
-
-
vue实现下载pdf文件
2021-06-25 10:49:302.这里是pdf文件已经由后台生成并且传到了阿里云,所以这边直接传入线上地址即可,其他小伙伴没有线上地址的 可以先实现阿里云上传或者其他方法获取到线上地址在调用。 this.fileLinkToStreamDownload(url) //直接... -
vue js 前端实现PDF文件下载的三种方式 解决vue下载pdf文件打开文件后空白
2021-11-19 15:58:36这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法 api(id).then(res => { let blob = new Blob([res]); let ... -
vue预览本地pdf文件.
2022-02-25 16:57:30预览pdf -
Vue pdf文件不预览直接下载
2021-02-04 15:26:25本地无法下载的话,可以试试放到线上。 文件名要加 .pdf 后缀 方法一: downloadFile_1(fileName, filePath) { if (!filePath) { return } let url = window.URL.createObjectURL(new Blob([filePath])) let ... -
vue跨域请求
2019-03-27 14:49:39vue的3种跨域请求方式 -
vue element-ui读取pdf文件的方法
2020-10-15 22:52:47主要介绍了vue element-ui读取pdf文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue base64下载PDF文件,ipad实现
2021-02-01 14:10:55<p>vue <p>ipad下,safari下载base64PDF文件</p> -
vue 本地文件下载 pdf excel 等文件
2022-04-19 10:59:48下载本地文档资源 亲测有用 并且兼容ie浏览器 npm install downloadjs // 引入download.js import download from "downloadjs"; download(url,'用户手册.pdf'); -
vue实现word,pdf文件的导出功能
2020-12-09 17:00:59vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `... -
方法:vue下载pdf ,不预览直接下载
2020-12-08 15:19:52vue下载pdf ,不预览直接下载 // 下载文件 downloadfun(file_name,file_path){ console.log(file_name) var ajax=new XMLHttpRequest(); ajax.open( "GET", file_path, true); ajax.setRequestHeader("Cache-... -
设置pdf地址,vue实现展示pdf文件自动加载下一页
2019-01-04 09:47:48设置pdf地址,vue实现展示pdf文件自动加载下一页,使用方便 -
vue 本地pdf文件展示
2021-08-27 14:09:44src="../../../static/plugins/pdf/2021海宁智能化改造案例.pdf" frameborder="0" /> --> <!-- 第二种 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 --> <iframe . -
vue中使用vue-pdf的方法详解
2021-01-19 02:55:023.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <div class=pdf_wrap> <div class=pdf_list> <!-- src:pdf地址,page: 当前显示页 --> <pdf v-for=i in numPages :k -
VUE不预览直接下载PDF、下载图片文件
2020-05-08 11:45:37但是pdf文件这样会直接打开预览 使用download.js可以免打开直接弹出下载框 GitHub地址 vue使用方法: 首先命令行 npm install downloadjs -S 在需要使用的页面xxx.vue文件的script标签内 import download f... -
vue-在线预览pdf文件和下载(pdf.js)
2019-09-25 17:47:06最近做项目遇到在线预览和下载pdf文件 试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径... -
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2020-12-07 07:38:21目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的... -
vue实现pdf文档在线预览功能
2020-12-14 02:58:34方式二:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图 方式三:将插件直接放在static文件夹下,如图 二、前端页面代码 方式一和方式二:特点精简 <canvas v-for="page in ... -
vue 通过url下载pdf文件
2021-11-04 09:23:55试过了各种a标签以及blob对象都下载不成功 最后找了个插件download.js GitHub - rndme/download: file downloading using client-side javascript 1.npm install downloadjs 2.import download from 'downloadjs... -
vue项目下载PDF文件
2021-08-06 10:42:24export function downPDF(query) { return request({ url: baseUrl + '/xxx/xxxPDF', //后端接口的地址 method: 'get', params: query, responseType: "blob", //这行必写 ...下载PDF文件的方法 //. -
使用vue-pdf预览pdf文件
2021-08-13 14:51:28本地预览的话,如果是使用cli/3,需要把pdf文件放到 public 文件下中,新建一个 static 文件夹,放入其中 使用 安装 vue-pdf 只能使用绝对路径,而且 / 就表示 public 文件夹,所以需要忽略掉,如下 <pdf src... -
vue 下载成pdf
2022-03-21 14:54:16标题vue 下载成pdf 在这里插入代码片 1. a.将html页面转换成图片 npm install --save html2canvas b.将图片生成pdf npm install jspdf --save 2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件,内容如下: ... -
vue页面怎么显示本地的pdf文件
2021-11-15 20:55:10一 ,npm install --save vue-pdf 下载插件包 二 , 新建一个.vue页面 , 把下面代码全部复制过去 , 打开vue页面就是pdf了 <template> <div class="pdf"> <pdf v-for="currentPage in ... -
vue预览本地pdf文件方法之vue-pdf组件
2020-11-24 17:41:45npm install --save vue-pdf 2、页面引入 3、具体实现 <div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <span @click="changePdfPage(0)" class="turn -
vue 怎么渲染渲染本地pdf文件?
2021-07-01 17:48:20网路地址 和静态资源的pdf文件是可以用iframe渲染的 (公司的地址打了马赛克 希望能理解) 但是换成本地的文件就不可以 有渲染出来的元素 但是页面不显示 -
vue elementui下载文件和使用vue-pdf展示pdf文件
2021-06-09 09:12:301、下载blob文件 //在请求中必须标明:responseType: 'blob'。 比如this.$axois({ method: 'get', url: '', responseType: 'blob' }).then(response => { let data = response.data; //如果下载下来的是i二...