精华内容
下载资源
问答
  • vue下载pdf文件

    千次阅读 2020-12-07 14:19:55
    注意这个npm下载的这个download.js是有问题的,它能下载下来pdf文件,但是打不开这个pdf,在文章末尾的话,我会附上一个修改完的js。 <template> <div class="home"> <!-- <HelloWorld @...

    一、引入download.js

    npm install downloadjs 
    地址:https://www.npmjs.com/package/downloadjs
    

    注意这个npm下载的这个download.js是有问题的,它能下载下来pdf文件,但是打不开这个pdf,在文章末尾的话,我会附上一个修改完的js。

    <template>
      <div class="home">
        <!-- <HelloWorld @listener="show" ref="child" />
        <span>这是父组件的样式:</span> <span class="cssColor">color</span> -->
        <button @click="down">下载</button>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    // 引入download.js
    import download from "downloadjs";
    export default {
      mounted() {
        // eslint-disable-next-line no-console
      },
      methods: {
        down() {
        /*我们只是需要这个地址放到这个里面就可以了*/
          download(
            "http://myweb-bucket.oss-cn-beijing.aliyuncs.com/2020/10/17/3fb95de68d8d45ebbf31d2c8f0724490新建 DOC 文档 (2).pdf"
          );
        }
      }
    };
    </script>
    <style lang="scss" scoped>
    /deep/ .cssColor {
      color: red;
    }
    </style>
    

    // 你下载完后,需要替换一下你的这个js,这个才是可靠的

    //download.js v4.21, by dandavis; 2008-2018. [MIT] see http://danml.com/download.html for tests/usage
    // v1 landed a FF+Chrome compatible way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
    // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
    // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
    // v4 adds AMD/UMD, commonJS, and plain browser support
    // v4.1 adds url download capability via solo URL argument (same domain/CORS only)
    // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
    // https://github.com/rndme/download
    
    /**
     * @typedef {Object} RequestData
     * @property {String} url - file url to download
     * @property {String} filename - custom filename to save
     * @property {String} data - data to save
     * @property {String} mimetype - custom file type
     */
    
    (function (root, factory) {
    	if (typeof define === 'function' && define.amd) {
    		// AMD. Register as an anonymous module.
    		define([], factory);
    	} else if (typeof exports === 'object') {
    		// Node. Does not work with strict CommonJS, but
    		// only CommonJS-like environments that support module.exports,
    		// like Node.
    		module.exports = factory();
    	} else {
    		// Browser globals (root is window)
    		root.download = factory();
      }
    }(this, function () {
    	var self = window, // this script is only for browsers anyway...
    		defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
    		blob,
    		reader,
    		anchor = document.createElement("a"),
    		toString = function (a) { return String(a); },
    		myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
    		myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
    	
    	var processData = function(payload, fileName, mimeType){
    		//go ahead and download dataURLs right away
    		if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(payload)){
    		
    			if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
    				payload=dataUrlToBlob(payload);
    				mimeType=payload.type || defaultMime;
    			}else{			
    				return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
    					navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
    					saver(payload) ; // everyone else can save dataURLs un-processed
    			}
    			
    		}else{//not data url, is it a string with special needs?
    			if(/([\x80-\xff])/.test(payload)){			  
    				var i=0, tempUiArr= new Uint8Array(payload.length), mx=tempUiArr.length;
    				for(i;i<mx;++i) tempUiArr[i]= payload.charCodeAt(i);
    			 	payload=new myBlob([tempUiArr], {type: mimeType});
    			}		  
    		}
    		blob = payload instanceof myBlob ?
    			payload :
    			new myBlob([payload], {type: mimeType}) ;
    
    		function dataUrlToBlob(strUrl) {
    			var parts= strUrl.split(/[:;,]/),
    			type= parts[1],
    			indexDecoder = strUrl.indexOf("charset")>0 ? 3: 2,
    			decoder= parts[indexDecoder] == "base64" ? atob : decodeURIComponent,
    			binData= decoder( parts.pop() ),
    			mx= binData.length,
    			i= 0,
    			uiArr= new Uint8Array(mx);
    
    			for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);
    
    			return new myBlob([uiArr], {type: type});
    		 }
    
    		function saver(url, winMode){
    
    			var _clickEvt = function(e) {
    				e.stopPropagation();
    				this.removeEventListener('click', _clickEvt);
    			}
    			if ('download' in anchor) { //html5 A[download]
    				anchor.href = url;
    				anchor.setAttribute("download", fileName);
    				anchor.className = "download-js-link";
    				anchor.innerHTML = "downloading...";
    				anchor.style.display = "none";
    				
    				anchor.addEventListener('click', _clickEvt);
    				document.body.appendChild(anchor);
    				setTimeout(function() {
    					anchor.click();
    					document.body.removeChild(anchor);
    					if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
    				}, 66);
    				return true;
    			}
    
    			// handle non-a[download] safari as best we can:
    			if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
    				if(/^data:/.test(url))	url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
    				if(!window.open(url)){ // popup blocked, offer direct download:
    					if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
    				}
    				return true;
    			}
    
    			//do iframe dataURL download (old ch+FF):
    			var f = document.createElement("iframe");
    			document.body.appendChild(f);
    
    			if(!winMode && /^data:/.test(url)){ // force a mime that will download:
    				url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
    			}
    			f.src=url;
    			setTimeout(function(){ document.body.removeChild(f); }, 333);
    
    		}//end saver
    
    		if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
    			return navigator.msSaveBlob(blob, fileName);
    		}
    
    		if(self.URL){ // simple fast and modern way using Blob and URL:
    			saver(self.URL.createObjectURL(blob), true);
    		}else{
    			// handle non-Blob()+non-URL browsers:
    			if(typeof blob === "string" || blob.constructor===toString ){
    				try{
    					return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );
    				}catch(y){
    					return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
    				}
    			}
    
    			// Blob but not URL support:
    			reader=new FileReader();
    			reader.onload=function(e){
    				saver(this.result);
    			};
    			reader.readAsDataURL(blob);
    		}
    		return true;
    	}
    
    	/**
    	 * data maybe String|{RequestData}|Blob, can download file with url given
    	 * strFileName if provided, it only work with data saver
    	 * strMimeType type of mime type, work like strFileName
    	 */
    	return function download(data, strFileName, strMimeType) {
    		var mimeType = strMimeType || defaultMime,
    			payload = data,
    			url = !strFileName && !strMimeType && payload,
    			fileName = strFileName || "";
    
    	  
    		if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
    			payload=[payload, mimeType];
    			mimeType=payload[0];
    			payload=payload[1];
    		}
    
    		if (data instanceof Object) {
    			if ('url' in data || 'data' in data) { // indicate this is new request type
    				url = data['url'] || false;
    				payload = data['data'];
    				fileName = data['filename'] || fileName;
    				mimeType = data['mimetype'] || mimeType;
    			} else {
    				return false;
    			}
    		}
    
    
    		if (url && url.length < 2048) { // if no filename and no mime, assume a url was passed as the only argument
    			fileName = fileName || url.split("/").pop().split("?")[0];
    			anchor.href = url; // assign href prop to temp anchor
    			if (anchor.href.match(/^https?:\/\//) != null) { // if the browser determines that it's a potentially valid url path:
    				var ajax = new XMLHttpRequest();
    				ajax.open("GET", url, true);
    				ajax.responseType = 'blob';
    				ajax.onload = function (e) {
    					//   download(e.target.response, fileName, defaultMime);
    					processData(e.target.response, fileName, defaultMime);
    				};
    				setTimeout(function () { ajax.send(); }, 0); // allows setting custom ajax headers using the return:
    				return ajax;
    			} // end if valid url?
    		} else { // end if url?
    			processData(payload, fileName, mimeType);
    		}
    	}; /* end download() */
    }));
    

    简单记录一下遇到的问题,如果有帮助到你记得三连。

    展开全文
  • vue 下载pdf文件

    千次阅读 2019-11-19 16:57:10
    首先安装依赖 npm install html2canvas jspdf --save 封装方法: // pdfMethod.js ...点这里下载 ...这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出
    1. 首先安装依赖npm install html2canvas jspdf --save
    2. 封装方法:
    // 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
    
    1. 开始使用:
    <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文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue-pdf预览pdf文件

    2021-01-13 14:06:03
    vue中引入vue-pdf插件预览pdf文件
  • vue实现下载pdf文件

    千次阅读 2021-06-25 10:49:30
    1.前端实现下载pdf文件更多的是新开一个标签页来打开pdf文件,然后在点击下载,这篇文章是...this.fileLinkToStreamDownload(url) //直接传入要下载pdf文件的线上地址 fileLinkToStreamDownload(url) { let fileN
    1.前端实现下载pdf文件更多的是新开一个标签页来打开pdf文件,然后在点击下载,这篇文章是分享的
    是点击直接下载,无需新开标签页
    
    2.这里是pdf文件已经由后台生成并且传到了阿里云,所以这边直接传入线上地址即可,其他小伙伴没有线上地址的
    可以先实现阿里云上传或者其他方法获取到线上地址在调用。
    
    3.pdf的预览可以直接用a标签或者window.open来实现
    
    this.fileLinkToStreamDownload(url)   //直接传入要下载的pdf文件的线上地址
    
    fileLinkToStreamDownload(url) {
          let fileName = this.getDay()
          let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/
          if (!reg.test(url)) {
            throw new Error('传入参数不合法,不是标准的文件链接')
          } else {
            let xhr = new XMLHttpRequest()
            xhr.open('get', url, true)
            xhr.setRequestHeader('Content-Type', `application/pdf`)
            xhr.responseType = 'blob'
            let that =this
            xhr.onload = function() {
              if (this.status == 200) {
                //接受二进制文件流
                var blob = this.response
                that.downloadExportFile(blob, fileName)
              }
            }
            xhr.send()
          }
        },
    
     downloadExportFile(blob, tagFileName) {
          let downloadElement = document.createElement('a')
          let href = blob
          if (typeof blob == 'string') {
            downloadElement.target = '_blank'
          } else {
            href = window.URL.createObjectURL(blob) //创建下载的链接
          }
          downloadElement.href = href
          downloadElement.download =
              tagFileName+
               //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          if (typeof blob != 'string') {
            window.URL.revokeObjectURL(href) //释放掉blob对象
          }
        },
    
    getDay()方法:拿当前的时间戳拼接,保证文件名字的唯一性,避免重名
    
    function getDay() {
    	let time = new Date(),
    	year = time.getFullYear(),
    	month = time.getMonth() + 1,
    	day = time.getDate(),
    	timeStem = time.getTime()
    	return `${year}/${month}/${day}/${timeStem}.jpg`
    }
    
    展开全文
  • vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 close-on-click-modal=false show-close=...
  • vue项目下载PDF文件

    2021-08-06 10:42:24
    export function downPDF(query) { return request({ url: baseUrl + '/xxx/xxxPDF', //后端接口的地址 method: 'get', params: query, responseType: "blob", //这行必写 ...下载PDF文件的方法 //.
    export function downPDF(query) {
      return request({
        url: baseUrl + '/xxx/xxxPDF',   //后端接口的地址
        method: 'get',
        params: query,
        responseType: "blob", //这行必写
        headers: { "Content-Type": "multipart/form-data" } //这行必写
      })
    }

    下载PDF文件的方法

     //下载pdf
        downPdf() {
          const query = { fileName: this.fileName };
          downPDF(query)
            .then((res) => {
             
              const blob = new Blob([res], {
                type: "application/pdf;chartset=UTF-8",
              });
              const a = document.createElement("a");
              const URL = window.URL || window.webkitURL;
              const herf = URL.createObjectURL(blob);
              a.href = herf;
              a.download = this.fileName;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              window.URL.revokeObjectURL(herf);
            })
            .catch((err) => {
              // 创建blob对象,解析流数据
              const blob = new Blob([err], {
                // 如何后端没返回下载文件类型,则需要手动设置:type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf,如果是word则设置为msword,excel为excel
                type: "application/pdf;chartset=UTF-8",
              });
              const a = document.createElement("a");
              // 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
              const URL = window.URL || window.webkitURL;
              // 根据解析后的blob对象创建URL 对象
              const herf = URL.createObjectURL(blob);
              // 下载链接
              a.href = herf;
              // 下载文件名,如果后端没有返回,可以自己写a.download = '文件.pdf'
              a.download = this.fileName;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
              // 在内存中移除URL 对象
              window.URL.revokeObjectURL(herf);
            });
        },

    展开全文
  • 从请求看到后台返回一些奇奇怪怪的数据,如下图(第一行提示的就是改文件的类型),那我该怎么将这些数据转换成对应的文件呢? 其实这些数据就是一些二进制,就是我们常说的blob对象(blob就是这些二进制...
  • 这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法 api(id).then(res => { let blob = new Blob([res]); let ...
  • vue下载本地pdf文件

    千次阅读 2020-02-19 14:03:08
    Vue下载本地pdf文件 html: <button @click="downloadPDf">downloadPDf</button> js: downloadPDf() { axios.post('http://localhost:8080/static/test....
  • 本地无法下载的话,可以试试放到线上。 文件名要加 .pdf 后缀 方法一: downloadFile_1(fileName, filePath) { if (!filePath) { return } let url = window.URL.createObjectURL(new Blob([filePath])) let ...
  • vue pdf 文件下载

    2020-09-08 15:31:42
    <template> <div class="priview_resume_container">...点这里下载</div> </div> </template> <script> export default { name: 'priviewResume', methods: {
  • 主要介绍了vue element-ui读取pdf文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...
  • 主要为大家详细介绍了Vue如何将页面导出成PDF文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 方法:vue下载pdf ,不预览直接下载

    千次阅读 2020-12-08 15:19:52
    vue下载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文件自动加载下一页,使用方便
  • pdf.js下载地址:http://mozilla.github.io/pdf.js/getting_started/#download 根据自身需求去选择对应版本 开始使用 一、项目中放置pdf.js的包 在项目的public文件夹下,新建一个pdfjs文件夹,将下载下来的build和...
  • 前端vue项目-关于下载文件pdf/excel

    千次阅读 2019-07-11 19:08:18
    最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweichao/p/9620940.html ...
  • vue-在线预览pdf文件下载(pdf.js)

    千次阅读 2019-09-25 17:47:06
    最近做项目遇到在线预览和下载pdf文件 试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径...
  • 在我们项目中,下载png,jpg的文件是非常方便的,动态生成一个a标签,给他赋值路径,动态点击,就可以实现这个功能,但是pdf,word等类型的文件是不行的,因为浏览器不允许我们直接点击下载,是点击预览,我们在这里...
  • 普通文件下载直接window.location.href=url 即可下载文件 但是pdf文件这样会直接打开预览 使用download.js可以免打开直接弹出下载框 GitHub地址 vue使用方法: 首先命令行 npm install downloadjs -S 在需要使用的...
  • 2、写个简单的java读取本地文件(Excel或PDF等),然后直接响应前端,看是否正常(防止是后端获取或者生成的文件有问题); 3、判断后端是否存在拦截器等,额外处理了数据(如对响应数据做了统一的包装或者序列化等...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,105
精华内容 3,242
关键字:

vue下载pdf文件

vue 订阅