vue 将base64 的文件流转换成pdf 并预览、下载，兼容 IE10+

关注

转载最新推荐文章于 2026-02-25 00:45:28 发布 7.5k 阅读 AI 写同款· GEO 优化 ›

Vue中使用jspdf转为pdf并文件下载（附：解决文件中文乱码 github中搜索jspdf，clone或者下载zip文件，下载之后找到 ’fontconverter‘ 打开里面有一个'fontconverter.html'，在浏览器中运行。打开之后就是这个样子，选择你的字体文件(xx.ttf) 然后点击Create会自动下载一个依赖你上传的字体文件的js，将这个js拖动到你的项目中使用。然后再项目中引入回到第 3 步的方法内部中，可以看到我们使用了这个字体并定义了字体格式。有某些场景，比如说页面有一个下载按钮，点击了下载按钮之后，会下载一个pdf文件。阅读详情

前提是先下载并引进需求

1.下载： npm install vue-pdf --save-dev

2.引进：import pdf from "vue-pdf";

1.预览：

// data为后端给的base64格式的pdf
import { data } from "../../tempData";
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
// html
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
  data () {
    return {
      src: '',
      numPages: 0,
      page: 1,
      currentPage: 0
    };
  }，
  components: {
    pdf
  },
  mounted () {
    let da = data.fileToBase64
    let datas = 'data:application/pdf;base64,' + da
    this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
    this.src.promise.then(pdf => {
      this.numPages = pdf.numPages;
    });
  },

2.下载：

//base64 转换 blob

dataURLtoBlob(dataurl) {

　　var bstr = atob(dataurl)

　　var n = bstr.length;

　　var u8arr = new Uint8Array(n);

　　while (n--) {

　　　　u8arr[n] = bstr.charCodeAt(n);

　　}

　　return new Blob([u8arr], { type: 'pdf' });

}



// res.data   就是后台返回的base64的 文件流

let URL = this.dataURLtoBlob(res.data);

var reader = new FileReader();

　　reader.readAsDataURL(URL);

　　reader.onload = function (e) {

　　　　// 兼容IE

　　　　if (window.navigator.msSaveOrOpenBlob) {

　　　　　　var bstr = atob(e.target.result.split(",")[1]);

　　　　　　var n = bstr.length;

　　　　　　var u8arr = new Uint8Array(n);

　　　　　　while (n--) {

　　　　　　　　u8arr[n] = bstr.charCodeAt(n);

　　　　　　}

　　　　　　var blob = new Blob([u8arr]);

　　　　　　window.navigator.msSaveOrOpenBlob(blob,'采购单.pdf');

　　　　} else {

　　　　　　// 转换完成，创建一个a标签用于下载

　　　　　　const a = document.createElement('a');

　　　　　　a.download = '采购单.pdf'; // 这里写你的文件名

　　　　　　a.href = e.target.result;

　　　　　　document.body.appendChild(a)

　　　　　　a.click();

　　　　　　document.body.removeChild(a)

　　}

}

转载于：vue 将base64 的文件流转换成pdf 并下载，兼容 IE10+ vue-pdf预览base64数据为pdf

收录于