Vue-cli 中的打印功能(window.print)

最新推荐文章于 2022-02-10 14:37:21 发布
VIP文章 最新推荐文章于 2022-02-10 14:37:21 发布
阅读量5k 收藏 4
点赞数 3
分类专栏： Vue.js 文章标签： vue.js html5 css javascript vue-cli打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FlowGuanEr/article/details/105514875
版权

Vue-cli 中的打印功能(window.print)

print.js 的封装

// print.js
export default {
   
  initIframe(printOption) {
   
    let printIframe = document.getElementById('easyPrintIframe');
    if (!printIframe) {
   
      printIframe = document.createElement('iframe');
      printIframe.id = 'easyPrintIframe';
      printIframe.style.position = 'fixed';
      printIframe.style.width = '0';
      printIframe.style.height = '0';
      printIframe.style.top = '-100px';
      if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) {
   
        printIframe.src =
          'javascript:document.write("<head><script>document.domain="' + document.domain + '";</script></head><body></body>")';
      }
      document.body.appendChild(printIframe);
      printIframe.onload = () => {
   
        this.getStyle(printOption);
      };
    }else{
   
      printIframe.contentDocument.body.innerHTML = '';
      printIframe.contentDocument.head.innerHTML = '';
      this.getStyle(printOption);
    }
  },
  setValues () {
   
    const inputs = document.querySelectorAll('input');
最低0.47元/天 解锁文章
锋利的二丫
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vue、js 打印 window.print（）方法
gu_eu的博客
03-05 3792
print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.querySelector('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。 最简单的使用，直接window.print()就可以，当然，document.execCommand('print') 也可以达到同样的效果。 代码示例 ： // 这里我们是对局部打印做
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称 3.已经设置，直接打印 4.没有设置，弹出设置打印机框 5.用户设置好确认后打印 问题反馈 有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息 关于我 您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。 如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
vue-cli时间转化问题
m0_56830409的博客
02-10 298
基于vue3.0其中时间转化中，因为过滤器被禁用报错，所以直接用element-ui中的vue3.0中的组件就可
Vue-cli实现打印页面内容功能
a791226606的博客
05-20 1361
Vue-cli实现打印页面内容功能 导出 export function print(content, w = null, h = null) { const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
Vue-cli脚手架
qq_42265394的博客
08-18 168
Vue-cli 1.1 什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速; 主要的功能: 统一的目录结构、本地调试、热部署、单元测试、集成打包上线 1.2 安装环境 安装 Node.js 环境 下载地址： http://nodejs.cn/download/ 安装就无脑下一步即可，安装在本机的环境目录中，安装完成会
在vue中使用node-cli实现终端信息展示并输出,以及展示项目中未使用的依赖
AzeShinja的博客
07-20 1019
首先在package.json中配置自己js文件的路径 单选框信息选择 我做的是一个多选一个是单选, 首先引入几个使用到的包 npm install chalk npm install figlet npm install clear npm install enquirer switch.js const clear = require('clear'); const chalk = require('chalk'); const figlet = require('figlet'); con.
使用 vue-cli(脚手架)搭建项目
eRunn
08-05 309
目录 1.搭建之前确保pc已经有node环境 2.搭建项目 2.1、选择项目位置 2.2、安装vue-cli(脚手架) 2.2、用vue-cli来创建一个基于 webpack 模板的新项目 2.3、安装项目所需的依赖 2.4、项目结构图 2.5、在内存运行项目 3.打包发布 3.1打包 3.2、下载发布工具serve 3.3、用工具serve发布项目 4.总结 4....
VCS基本操作命令
热门推荐
Grady
01-17 1万+
FBI Warning：一切以vcs user guide为准。 1、VCS仿真流程 Step1: Compliation Verilog Code （cpu.v）—— simv （Simulation Executable） Step2: Simulation simv —— FSDB Files （VPD Files / VCD Files） 后续可以用Verdi Debug。 2、VCS仿真模式 2.1 vcs仿真的2个步骤： 代码编译：如 vcs cpu.v 仿真运行：如 simv 或者通过-R选项
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个...
Vue实现浏览器打印功能的代码
10-15
主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue-cli-project：Vue.js 2.x实战开发项目脚手架
02-06
一个Vue.js项目Vue cli3.x基于Vue-cli3构造的前端开发项目模板，已在vue.config.js文件中配置好webpack，可以参考，开箱即用，欢迎大家围观指教！使用# 安装服务npm install# 启动服务npm run dev说
js获取Iframe里面指定元素集合
玲曦的博客
07-10 555
let iframeDom = document.getElementById("easyPrintIframe").contentWindow; let images = iframeDom.document.getElementsByTagName('img'); console.log('所有图片：',images);
vue中实现window.print()打印功能遇到的几个坑
weixin_45579264的博客
11-22 1万+
vue中实现window.print()打印功能遇到的几个坑 之前做过打印pdf功能，现在是打印当前页面，使用window.print()可以打印，不过遇到的坑比较多，先给大家介绍下项目背景，我们使用vue+element UI这一套。 第一坑，点击打印按钮，会弹出预览打印的弹窗，原生的js打印会压缩页面，会打乱你之前的布局，这时候又是你头疼的时候，刚tm调好的样式，怎么又要调，不过再怎么发牢骚，...
vue实现打印功能最简单的方法
jiangwei1994的博客
01-23 1万+
一、下载打印插件 通过这个地址下载vue打印插件：https://github.com/xyl66/vuePlugs_printjs，下载完毕后，在src下新建文件夹plugs，将下载的插件print.js放到plugs文件夹里 二、全局注册打印插件 在main.js里注册打印插件，注册完成后，就可以在组件中使用了，main.js里的代码如下： // vue 打印插件 import P...
vue，打印案例 window.print() 的完美实现
态度决定一切
12-25 7665
网页效果图： 调用window.print()打印的效果： 案例git地址
vue下实现window.print局部打印
海天酱油zz
04-30 4780
代码是我同事提供的，这个发博客主要就是记录下，下一次好用。 下面上代码 // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this...
Vue 使用window.print()打印指定的vue 组件
Orange_w的博客
08-27 3689
Vue 使用window.print()打印指定的vue 组件 前端小白，最近做一个vue项目，需要打印页面指定的组件内容，在网上百度借鉴了很多大佬的方法，都不是很适用。所以根据自己的理解写了一个简单地打印功能。 点击打印，获取页面所有详细信息 直接附上代码： //打印 doPrint(){ let subOutPrintButton=document.getElementsByClassName("print"); var newContent=[];
vue-cli3.0中的process.env.NODE_ENV
最新发布
09-14
在Vue CLI 3.0中，process.env.NODE_ENV是一个全局变量，用于获取当前的环境模式。它的值可以是以下三种之一： 1. development：在开发模式下使用，通常用于本地开发调试。 2. production：在生产模式下使用，用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

锋利的二丫

如果对您有帮助，请博主喝杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值