vue页面打印机打印部署到服务器上字体大小不一致

本地测试正常,部署到服务器字体就变小了

最后找到问题是rem基于的html的字体大小不起效果,

解决方法是新建一个页面,跳转

        <router-link
          target="_blank"
          :to="{ path: `/printexam/` + this.printid }"
          ><el-button
            class="print"
            size="mini"
            icon="el-icon-print"
            style="background-color: #2298ef; color: #fff"
            >打印</el-button
          ></router-link
        >

路由

{
  hidden: true,
  path: '/printscore/:id',
  component: (resolve) => require(['@/views/score/print'], resolve),
  name: '打印个人成绩'
},

接收参数

  data() {
    return {
      printData: {},
      id: this.$route.params.id,
    };
  },

取数据打印

      printExamScore(this.id).then((response) => {
        if (response.code === 200) {
          this.printData = {};
          this.printData = response.data;
        }
        setTimeout(() => {
          window.print();
        }, 1000);
      });

css用全局,自定义html字体

<style lang="scss">
html {
  font-size: 16px !important;
}

over

 

posted @ 2022-06-02 15:36  jqynr  阅读(569)  评论(0)    收藏  举报