Vue pdf 文件(文件流)预览,下载,视频下载

news/2024/10/30 17:25:57/

pdf文件预览

 // 预览
<iframe :src="pdfUrl" frameborder="0" style="width: 100%; height:900px"></iframe>//window.open('/pdf/web/viewer.html?file=' + path);//path是文件的全路径地址

下载pdf.js插件 https://mozilla.github.io/pdf.js/PDF.js

 解压放到项目public目录文件中 

使用: window.open('/pdf/webs/viewer.html?file=' + path);//path是文件的全路径地址

预览方法

 // 预览handlePreview(file) {this.$axios.post({ f8s: file.token }).then(res => {let link = document.createElement('a');  //创建a标签link.style.display = 'none'; //样式无let blob = new Blob([res], { type: 'application/pdf;charset=utf-8', }); link.href = URL.createObjectURL(blob); //创建文件地址//this.pdfUrl=link.href //第一种 iframe 预览// 获取文件名link.download = `${file.name}.pdf`;document.body.appendChild(link);this.pdfUrl = `/pdf/webs/viewer.html?file=${encodeURIComponent(link.href)}`;window.open(this.pdfUrl); //第二种 pdf.js 预览});},

pdf文件下载:

    // 下载handleDownload(file) {this.$axios.post({ f8s: file.token }).then(res => {let link = document.createElement('a');link.style.display = 'none';let blob = new Blob([res], {type: 'application/pdf;charset=utf-8',//Content-Disposition: inline;filename=<pdf的文件名>//Content-Type: application/pdf;charset=UTF-8//attachment表示下载文件,inline表示内嵌显示;});link.href = URL.createObjectURL(blob);// 获取文件名link.download = `${file.name}.pdf`;document.body.appendChild(link);link.click(); //触发link.remove(); // 一次性的,用完就删除a标签});},

视频下载:

  //  下载视频downloadAudio(file) {this.$axios.post({ f8s: file.token }).then(res => {let link = document.createElement('a');link.style.display = 'none';let blob = new Blob([res], { type: 'application/vnd.ms-excel' });link.href = URL.createObjectURL(blob);// 获取文件名document.body.appendChild(link);//下载文件link.setAttribute('download', file.name);link.click(); // 下载文件URL.revokeObjectURL(link.href); // 释放内存});},

http://www.ppmy.cn/news/437123.html

相关文章

前端(vue)导出pdf

纯前端导出 pdf 实现方法如下&#xff1a; 1. 安装 html2pdf、jspdf npm install html2canvas jspdf --save 2. 项目 utils 文件夹中新建一个 html2pdf.js&#xff08;文件名称自拟&#xff09;文件&#xff0c;内容如下&#xff1a; import jsPDF from jspdf import html2…

Vue导出PDF

一. 使用vue-to-pdf npm i vue-to-pdf --save引入: import vueToPdf from vue-to-pdf; Vue.use(vueToPdf);使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用 this. P D F S a v e ( t h i s . PDFSave(this. PDFSave(this.refs[‘…

后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出(方案二:puppeteer nodejs express 实现)

近期公司提出了一个新需求&#xff0c;希望将用户在前端填写的一系列数据生成一个报告给用户&#xff0c;报告大概有8个表格&#xff0c;表格涉及到分页。于是查询了资料&#xff0c;做出以下两个方案。 方案一请点击这里 方案二 puppeteer 生成页面的截图和PDF puppeteer官…

vue2.0将页面html导出为pdf格式文档

npm i html2canvasnpm i jspdf创建一个js文件 // 页面导出为pdf格式 //title表示为下载的标题&#xff0c;html表示document.querySelector(#myPrintHtml) import html2Canvas from html2canvas import JsPDF from jspdfconst htmlPdf {getPdf(title, html) {html2Canvas(htm…

vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载,以及uniapp中文件包(文件流)的下载处理

方法一&#xff1a;a标签 // 下载 const downLoad (url: string, name: string,type:string) > {var xhr new XMLHttpRequest();xhr.open(GET, url, true);xhr.responseType arraybuffer; // 返回类型blobxhr.onload function () {if (xhr.readyState 4 && xh…

Vue中将页面导出为PDF

Vue中将页面导出为PDF 实现思路第一步第二步第三步第四步全部代码展示 实现思路 在Vue中实际是把页面利用canvas转换成图片&#xff0c;然后再用图片的base64码转成PDF&#xff0c;这里就使用到了两个插件html2canvas和jspdf 第一步 安装两个插件 npm install --save html…

爱奇艺2020官方下载_爱奇艺视频如何上传

软件是否好用&#xff0c;还得大家下载爱奇艺安装才知道。本文分享爱奇艺2020官方下载_爱奇艺视频如何上传。爱奇艺电影频道拥有大量高清在线电影资源&#xff0c;热门高清电影、好评电影、电影预告都可以在线观看&#xff0c;不去电影院也能看好电影&#xff0c;而且是看所有电…

vue 文件导入导出/上传下载并与后端交互操作

上传/导入 1、前端解析文件处理后再传递 依赖—解析文件 import Papa from papaparsehtml <div class"_importIn"><img title"导入文件" src"../../assets/image/tech/importIn.png" alt""><!--css中将导入文件隐藏…