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("数据解析失败");;
            }
        },

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
3月前
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
147 0
|
JavaScript
vue里怎么使用pdf.js实现pdf文件的预览功能
vue里怎么使用pdf.js实现pdf文件的预览功能
740 0
vue里怎么使用pdf.js实现pdf文件的预览功能
|
JavaScript 前端开发
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
文章的总结目标实际上就是一个前端pdf打印组件,由於能在往后的其他项目中得以快速上手,并能根据所在项目需要快速自定义扩展,因此組件非常简陋直白,文章是实践过程的记录产物,并不保证完全正确,仅作参考。
React+html2canvas+jspdf+antd快速实现前端pdf预览及打印
|
存储 JavaScript 前端开发
js实现灵活下载和预览网络链接pdf文件
js实现灵活下载和预览网络链接pdf文件
855 0
pdf.js 怎么预览 base64 类型的 pdf 文件
pdf.js 怎么预览 base64 类型的 pdf 文件
460 0
pdf.js 怎么预览 base64 类型的 pdf 文件
|
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怎么办??
|
5月前
|
JavaScript
vue项目实现预览pdf功能(解决动态文字无法显示的问题)
最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)
128 0
|
5月前
|
JavaScript 前端开发 API
vue 实现pdf预览和下载
vue 实现pdf预览和下载
385 0
|
7月前
|
前端开发 JavaScript
前端实现文件预览(pdf、excel、word、图片)
前端实现文件预览(pdf、excel、word、图片)
164 0