精华内容
下载资源
问答
  • vue预览PDF文件流

    2021-03-24 17:29:43
    import pdf from 'vue-pdf' import { Vue, Component, Watch, Prop, Emit } from 'vue-property-decorator' import axios from 'axios' @Component({ name: 'vue文件名', components: { pdf } }) private ...

    引入ts文件

    import pdf from 'vue-pdf'
    import { Vue, Component, Watch, Prop, Emit } from 'vue-property-decorator'
    import axios from 'axios'
    
    @Component({
      name: 'vue文件名',
      components: {
        pdf
      }
    })
    
     private getPDFData(dataUrl :any){
        axios({
              method: 'post',
              url: dataUrl,
              responseType: 'blob',
              data:{},
              headers: {'X-Requested-With': 'XMLHttpRequest'},
              }).then(downloadres => {
                this.url = URL.createObjectURL(downloadres.data)
              }).catch(e => {
                console.info('eeeee-->', e)
              })
      }
    
    <div class="deta-notice-box">
      <pdf :src="url"></pdf>
      <!-- <iframe src="@/assets/市政合格书全套.pdf" width="100%" height="500px" frameborder="no" border="0"></iframe> -->
    </div>
    
    展开全文
  • vue-pdf预览pdf文件流

    2021-01-13 14:06:03
    vue中引入vue-pdf插件预览pdf文件流
  • vue-pdf 通过文件流预览pdf文件

    千次阅读 热门讨论 2019-07-15 17:39:59
    而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。 首先,下载vue-pdf npm install vue-pdf -D 其次,模板里面引入vue-pdf import pdf from 'vue-pdf' html: <pdf :src="src"></...

    用过vue-pdf的同志应该都知道,如果拿到的是一个pdf的在线链接在使用这个的时候会出现一个跨域问题。而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。
    首先,下载vue-pdf

    npm install vue-pdf -D
    

    其次,模板里面引入vue-pdf

    import pdf from 'vue-pdf'
    

    html:

    <pdf :src="src"></pdf>
    

    相关js:

     // 初始化获取pdf文件
          getPdfCode () {
            let that = this;
            axios({
              method: 'get',
              url: '请求的URL',
              headers: {
                'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
              },
              responseType: 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
            }).then(response => {
              that.src  = that.getObjectURL(response.data);
            }).catch(function (error) {
              console.log(error);
            });
          },
    
          // 将返回的流数据转换为url
          getObjectURL(file) {
            let url = null;
            if (window.createObjectURL != undefined) { // basic
              url = window.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
              try {
                url = window.webkitURL.createObjectURL(file);
              } catch (error) {
    
              }
            } else if (window.URL != undefined) { // mozilla(firefox)
              try {
                url = window.URL.createObjectURL(file);
              } catch (error) {
    
              }
            }
            return url;
          },
    
    展开全文
  • vue-pdf 通过文件流,页面预览pdf文件

    千次阅读 2020-07-01 14:38:07
    参考大佬博客 ... <!--预览对话框--> <el-dialog class="pdf" :visible.sync="fileType"> <p class="arrow"> ...

    参考大佬博客

    https://blog.csdn.net/m0_37852904/article/details/95992267?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

     

    <!--预览对话框-->
            <el-dialog class="pdf" :visible.sync="fileType">
                <p class="arrow">
                    <!--上一页-->
                    <span @click="changePdfPage(0)" class="turn addBtn" :class="{grey: currentPage==1}">上一页</span> {{currentPage}} / {{pageCount}}
                    <!--下一页-->
                    <span @click="changePdfPage(1)" class="turn addBtn" :class="{grey: currentPage==pageCount}">下一页</span>
                </p>
                <!--自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
                <!--src需要展示的PDF地址-->
                <!--当前展示的PDF页码 -->
                <!--PDF文件总页码-->
                <!--一开始加载的页面-->
                <!--加载事件--><!-- @page-loaded="currentPage=$event" -->
                <pdf :src="src" :page="currentPage" @num-pages="pageCount=$event"  @loaded="loadPdfHandler">
                </pdf>
            </el-dialog>

    seeMenu(id) {

                 let url = url?id=id;
                    _this.$axios.get(url, {
                        responseType: 'blob',
                        'Content-Type': 'application/pdf'
                    }).then(res => {
                        let content = res.data;
                        let url="";
                        if (window.createObjectURL != undefined) { // basic
                                  url = window.createObjectURL(content);
                                } else if (window.webkitURL != undefined) { // webkit or chrome
                                  try {
                                    url = window.webkitURL.createObjectURL(content);
                                  } catch (error) {
                        
                                  }
                                } else if (window.URL != undefined) { // mozilla(firefox)
                                  try {
                                    url = window.URL.createObjectURL(content);
                                  } catch (error) {
                        
                                  }
                                }
                        this.src=url;
                  
                    })

    }

    展开全文
  • Vue项目中使用pdf.js预览pdf文件流

    千次阅读 2019-10-12 15:16:11
    Vue项目中使用canvas和pdf.js预览pdf文件流 网上目前的解决方案大多是在将pdf.js放在static文件内,这样j6angjin的后果就是打包文件变得非常大(我的项目由800k变大到将近5m),后来发现了pdf.js的node包pdf_dist这个...

    Vue项目中使用canvas和pdf.js预览pdf文件流

    网上目前的解决方案大多是在将pdf.js放在static文件内,这样j6angjin的后果就是打包文件变得非常大(我的项目由800k变大到将近5m),后来发现了pdf.js的node包pdf_dist这个给我们提供了一个新的方向,使用npm安装避免了打包文件过大的问题。

    代码实现

    <template>
      <div>
        <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
      </div>
    </template>
    <script>
    import service from '@api/main'
    import PDF from "pdfjs-dist";
    import {
        staticUrl
      } from '@utils/config'
    export default {
    	data() {
    		return {
    			PDFData:null,
    			pages: null
    		};
    	},
    	mounted() {
    		let url=this.$route.query.url
    		//ajax请求获取文件流,可根据自己需要修改
    		service.getPdfUrl(url).then(
    			data=>{
    			this.PDFData = data
    			let pdfurl=this.getObjectURL(this.PDFData)
    			this._loadFile(pdfurl); 	
    			}
    		)
    		
    	},
    	components: {},
    	methods: {
    		//根据文件流获取url地址(使用blob)
    		getObjectURL(data) {
    			let blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'});//文件流转为blob
    			let url = window.URL.createObjectURL(blob); //创建下载的链接
    			return url
    		},
    		//加载PDF
    		_loadFile(url) {
    			PDF.getDocument(url).then(pdf => {
    				this.pdfDoc = pdf;
    				this.pages = this.pdfDoc.numPages;
    				this.$nextTick(() => {
    				this._renderPage(1);//渲染第一页PDF
    				});
    			});
    		},
    		//渲染PDF
    		_renderPage(num) {
    			this.pdfDoc.getPage(num).then(page => {
    				let canvas = document.getElementById("the-canvas" + num); //canvas画布作为PDF展示容器~~
    				let ctx = canvas.getContext("2d");
    				let dpr = window.devicePixelRatio || 1;
    				let bsr =
    					ctx.webkitBackingStorePixelRatio ||
    					ctx.mozBackingStorePixelRatio ||
    					ctx.msBackingStorePixelRatio ||
    					ctx.oBackingStorePixelRatio ||
    					ctx.backingStorePixelRatio ||
    					1;
    				let ratio = dpr / bsr;
    				let viewport = page.getViewport(
    					screen.availWidth / page.getViewport(1).width
    				);
    				canvas.width = viewport.width * ratio;
    				canvas.height = viewport.height * ratio;
    				canvas.style.width = viewport.width + "px";
    				canvas.style.height = viewport.height + "px";
    				ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
    				let renderContext = {
    					canvasContext: ctx,
    					viewport: viewport
    				};
    				page.render(renderContext);
    				if (this.pages > num) {
    					this._renderPage(num + 1);//如pdf有多页,则多次渲染
    				}
    			});
    		}
    		
    	}
    };
    </script>
    

    注意事项

    vue中引入pdfjs依赖

    npm install pdfjs-dist --save
    

    获取文件流的请求需要添加responseType: ‘blob’,

    const Axios = axios.create({
    	baseURL: baseURL,
    	responseType: 'blob',
    	headers: {
    		'Content-Type': 'application/x-www-form-urlencoded;charse 
    
    展开全文
  • 提示:因最近项目需求,项目需要实现vue页面内预览pdf,后端以文件流形式返回pdf地址。 一、方法概述 方法引入插件为:vue-pdf npm install --save vue-pdf 二、方法使用 1.页面: <!--工具条--> <div ...
  • 鉴于自己花了很长时间才成功实现pdf预览,特此写给感兴趣的宝宝们,少走些弯路 首先下载pdfjs插件, 可以在官网上下载,...
  • 最近参与了个项目,前端框架采用的是vue.js,需求是在项目中做一个pdf在线预览打印等功能,在网上找了很多例子基本上全 都是靠pdf.js实现的,很多例子说的都不清楚,对于我这个vue小白来说话,和天书差不多…几经...
  • vue+ts+elementUI:后端返回文件流,前端预览pdf文件 1.配置接口 //获取pdf文件流 export const getPdfService = (paramsData: any) => { const res: any = service.post('/idsapi/api/dispatch/dispatch_file_...
  • vue项目需要对后端返回的PDF文档数据进行处理,在前端实现处理后的PDF文件预览以及打印功能,最后再处理PDF页面打印乱码问题。 2.需求分析: 首先由于后端返回的是文档数据,所以第一步要将文档数据转换为...
  • 需求:后端返回文件流前端将文件流转为成blob地址预览pdf文件 两种方式: 1,PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端,生成blob地址预览 2,Vue-pdf: ...
  • 我的业务场景是需要解析后端的PDF文件流,然后预览最后可以打印出来就完事! 完全不需要插件几句代码就搞定了,这里就不废话了直接上代码! 直接起飞!!!懂得都懂香就完事!有问题评价 export function getFile(id)...
  • 一、pdf预览 有建议用pdfJs插件的,有iframe嵌套,下面介绍pdf插件 引入插件 npm install --save vue-pdf 1.接口: exportfunctionpdfInfo(data){ returnrequest({ headers:{ 'Content-Type':'...
  • 公司需求是前端接收后端传过来的pdf文件流显示在页面上面 刚开始感觉很简单 一顿操作猛如虎 回头一看0-5 回忆踩坑记录 1.电脑可以显示 手机上无法显示 拖了我一天多 后来发现是后台目录问题 2.安卓可以显示 ios不能...

空空如也

空空如也

1 2 3 4 5
收藏数 89
精华内容 35
关键字:

vue预览pdf文件流

vue 订阅