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

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
6月前
|
前端开发
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
开发过程中遇到过的docx、pptx、xlsx、pdf文件预览多种方式
104 0
|
6月前
|
存储
若依框架 --- pdf文件上传预览功能实现
若依框架 --- pdf文件上传预览功能实现
331 0
|
1月前
|
前端开发
PDF文件上传转成base64编码并支持预览
PDF文件上传转成base64编码并支持预览
131 12
|
3月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
266 0
|
3月前
|
Web App开发 iOS开发 容器
Vue3PDF预览(vue3-pdf-app)
`vue3-pdf-app` 插件提供了一个简单而强大的 PDF 预览解决方案。通过 `<a>` 标签即可快速预览 PDF 文件。为满足更复杂的定制需求,提供了 `PDFViewer.vue` 组件,基于 `vue3-pdf-app@1.0.3` 封装,支持多种功能如缩放、旋转、全屏预览、打印等,并可自定义主题颜色与语言。组件属性包括文件地址 (`src`)、预览容器尺寸 (`width`, `height`)、默认缩放规则 (`pageScale`) 和主题 (`theme`) 等。适用于多种浏览器,方便集成到项目中。
631 2
Vue3PDF预览(vue3-pdf-app)
|
3月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
2974 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
4月前
|
JavaScript 数据库
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
文本,在线浏览PDF,一个最简单的文档标准样式,文档预览非常简单的样式,文档管理样式设计,标准,好的设计
|
4月前
|
JavaScript
Vue PDF预览(微信公众号,app也可用)
Vue PDF预览(微信公众号,app也可用)
174 0
|
6月前
|
编解码 前端开发 JavaScript
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
310 1
|
6月前
|
前端开发 UED
🌟前端分页加载/懒加载预览PDF🌟
🌟前端分页加载/懒加载预览PDF🌟
下一篇
无影云桌面