vue pdf文件预览+页面打印 - 掘金 - 程序猿·D·安宇雨 DeepMind

vue pdf文件预览+页面打印 - 掘金

安宇雨 - 随手采集
2023-08-18 15:01:05
随手采集
0000-未整理-等待研究

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

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

1 pdf预览

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

html

复制代码

`<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

lua

复制代码

npm install print-js --save

（2）组件中引用

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

javascript

复制代码

`<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文件中设置。

csss

复制代码

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

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

原网址: 访问
创建于: 2023-08-18 15:01:05
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到