pdf 预览 打印

简介: pdf 预览 打印

1. 前言

  1. 预览和打印其实一样

2. 首先注意请求头这块的配置

export function handPrint(data) {
  return request({
    url: CommonDataAPI.XXurl,
    method: "get",
    params: data,
    responseType: "blob"
  });
}
  1. responseType: "blob"
  2. 具体和自己的服务器人员沟通

3. pdf预览

  • PDF预览 打开新页面 二进制文件流

pdfViewBlob(res, fileName) {
    if (!res.data || res.data.size == 0) {
      newMessage.error("解析数据为空!");
      return;
    }
    if (isIE()) {
      // 如果是ie浏览器下载到本地
      let blob = new Blob([res.data], {
        type: "application/octet-stream;charset=utf-8",
      });
      window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else {
      // 如果不是ie浏览器,新窗口打开预览文件,自行下载
      let pdfUrl = "";
      const binaryData = [];
      binaryData.push(res.data);
      //获取blob链接
      pdfUrl = window.URL.createObjectURL(
        new Blob(binaryData, { type: "application/pdf" })
      );
      let newWindow = window.open();
      newWindow.location.href = pdfUrl;
    }
  },

4. 打印

// 打印
        async handlePrint(row) {
            let vm = this;
            let params = {
            key:val,
            }
            const res = await handPrint(params);
            if (!(res && res.data)) {
                return this.$message.error("数据获取失败");
            }
            if (res.status == 200) {
                let fileReader = new FileReader();
                fileReader.readAsText(res.data);
                fileReader.onload = function (result) {
                    try {
                        let jsondata = JSON.parse(result.target.result);
                        if (jsondata.code != 0) {
                            vm.$message.error(jsondata.msg);
                            return;
                        }
                    } catch {
                        // vm.$printFn.pdfViewBlob(res, fileName + ".pdf");
                        vm.$printFn.pdfViewBlob(res, "xxx.pdf");
                    }
                };
            } else {
                // this.$message.error("数据解析失败");;
            }
        },

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
4天前
|
前端开发
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
25 0
|
4天前
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
173 0
|
JavaScript
vue里怎么使用pdf.js实现pdf文件的预览功能
vue里怎么使用pdf.js实现pdf文件的预览功能
775 0
vue里怎么使用pdf.js实现pdf文件的预览功能
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
存储 JavaScript 前端开发
js实现灵活下载和预览网络链接pdf文件
js实现灵活下载和预览网络链接pdf文件
891 0
pdf.js 怎么预览 base64 类型的 pdf 文件
pdf.js 怎么预览 base64 类型的 pdf 文件
500 0
pdf.js 怎么预览 base64 类型的 pdf 文件
|
4天前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
|
4天前
|
编解码 前端开发 JavaScript
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
34 1
|
4天前
|
JavaScript
Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题
Vue实现预览PDF并且支持打印,不会出现乱码、拉升变形、打印预览被切割等弱智问题
|
4天前
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??