vue pdf文件预览+页面打印本文介绍的pdf预览功能使用`embed`标签放置pdf文件地址实现预览功能。其实本质是

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

本文介绍的pdf预览功能没有使用依赖，使用embed标签放置pdf文件地址实现预览功能。其实本质是使用浏览器的打开pdf文件功能。页面打印功能则是使用了依赖print-js。

1 pdf预览

embed是html5中新增的标签，可以在页面中嵌入任何类型的文档。

<embed
      style="width: 100%; min-height: 66vh; height: 100%"
      frameborder="0"
      :src="url + '#view=FitH,top' + '&toolbar=0&navpanes=0&scrollbar=0'"
    />

上面地址实际显示为：url#view=FitH,top&toolbar=0&navpanes=0&scrollbar=0
笔者在项目使用中，需求是默认全屏展示+无工具栏。在网上搜了一下embed标签中src可使用的属性以实现此功能。

1、配置 view=FitH,top 可以全屏显示embed标签中的内容；
2、配置 toolbar=0、navpanes=0、scrollbar=0 用于设置操作状态栏是否显示；
3、配置 toolbar=1 工具栏会继续显示出来；
4、src之间的属性除了第一个需要用#关联，后续的需要使用&符号

2 页面打印

使用vue3+print-js实现打印pdf文件功能。

（1）需要下载依赖print-js

npm install print-js --save

（2）组件中引用

打印调用下方的print方法即可，printable属性是需要打印的id值；css是可以外部引用的样式文件，一般要写在html文件附近。

<template>
  <组件 id="divId"></组件>
</template>
import print from "print-js";
export default {
  methods: {
   print() {
     print({
       printable: "divId",
       type: "html",
       scanStyles: false,
       css: "/static/print-style.css",
       documentTitle: "",
     });
   },
 }
}

（3）打印样式

根据工作需求有时会要求固定纸张尺寸打印；笔者碰到的需求就是要求默认A4并且无页眉页脚打印。这里就是在css文件中设置。

@page {
  size:portrait A4;
  margin: 8mm;
}

1、size属性中可以指定打印的页面方向和纸张尺寸；
portrait是默认的纵向页面打印；
landscape设置为横向页面打印；
2、margin: 8mm;其实是向外展开以达到隐藏页眉页脚的需求；一般这个值是比较标准的，当然有特殊情况也可以再调整。
3、更多扩展内容可以百度@page；