vue3+vite+print-js打印页面指定元素踩坑：宽度超过默认宽度导致打印不全、字体大小失效、自定义字体失效

最新推荐文章于 2024-09-18 15:18:53 发布

永远不会太晚

最新推荐文章于 2024-09-18 15:18:53 发布

阅读量5.2k

点赞数 4

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_42611074/article/details/128400070

版权

vue 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

本文介绍了如何利用print-js库进行页面元素的打印，并解决打印时元素显示不全、字体大小和自定义字体失效的问题。通过调整maxWidth属性、设置font_size及使用@font-face传递自定义字体路径，成功实现了打印效果的优化。同时，通过在vite项目中引入外部config.js文件，确保了开发和生产环境字体文件路径的动态配置。

摘要由CSDN通过智能技术生成

花了一下午，主要是调研几种打印页面指定元素最终的实现效果，最终还是print-js效果度符合要求

开始踩坑：

1.打印的元素显示不全

原因是默认maxWidth属性是800，元素超过了，需要自行调整下maxWidth属性

2.打印时font-size字体大小失效

翻了下print-js的github issues找到一种解决方案，设置font_size: "",

3.font-family自定义字体失效

没找到相关资料，最终花时间看了下源码
print-js是基于iframe实现，style属性作为样式插入到iframe中，那就简单了，传递一下@font-face字符串
重点在于开发环境和生产环境的文件地址不一样，所以我把地址挂在了window对象上

import printjs from "print-js"
export default {
methods: {
  print() {
      printjs({
        // 打印页面的dom
        printable: this.$refs.content,
        type: "html",
        maxWidth: 1150, // 最大宽度
        font_size: "", // 不设置则使用默认字体大小
        style: `@font-face {
          font-family: "STZHONGS";
          src: url(${window.ttf}) format("truetype");
        }`,
        // 继承原来的所有样式
        targetStyles: ["*"],
      })
    }
  }
}

我的项目是基于vite的，html中加入<script src="./config.js"></script>，vite只会打包type="module"的script标签，这样config.js就不会被打包压缩，就可以用于写入一些不管开发还是打包后，都可以任意更改的配置项

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    // 新增
    <script src="./config.js"></script>
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

config.js

// 字体文件路径，用于打印设置，print.js源码基于iframe实现，需要指定字体路径到iframe中
// 开发
window.ttf = "http://192.168.4.237:9010/src/assets/font/chinese.stzhongs.ttf"
// 线上
// window.ttf = "http://192.168.4.238:9010/test/assets/font/chinese.stzhongs.ttf"