在网上找了一个打印组件vue-print-nb
安装 npm install vue-print-nb --save
<p>...</p>
<div class="describle">
<el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="describle">
<el-input
:disabled="detail"
type="textarea"
:rows="4"
:maxlength="2000"
placeholder=""
v-model="form.describle">
</el-input>
</el-form-item>
</el-form>
<button v-print="'#printMe'">Print local range</button>
点击打印按钮,就可以打印页面了
在使用这个插件过程中遇到一个问题,普通的input标签内容展示没问题,textarea文本域这种内容就展示不出来,检查了一下插件,发现作者在给表单赋值的时候用的是value值,这种赋值对于一些双标签的表单就无效,需要修改一下
PS: 现在的新版本作者已经修复了这个问题,使用新版本的同学可以忽略
这种直接改包的方法也不太好,如果其他人下载你的代码,也需要修改包,所以,最好把这个包拿出来,放在文件中,在main.js直接引用
main.js 引用 import Print from '@/utils/vue-print-nb/'
<el-button type="primary" @click="toImg">转图片打印</el-button>
<el-button
v-print="printObj"
type="primary">直接打印</el-button>
<img style="margin-top:20px;" :src="img" alt="">
</template>
<script>
import html2canvas from
'html2canvas'
// 转图片打印需要先安装html2Canvas和print-js
import printJS from
'print-js'
export
default
{
data() {
return
{
img:
''
,
printObj: {
id:
'printMe'
,
popTitle:
'打印'
,
extraCss:
'https://www.google.com,https://www.google.com'
,
extraHead:
'<meta http-equiv="Content-Language"content="zh-cn"/>'
watch: {
created() {
methods: {
toImg() {
// 转图片打印
html2canvas(
this
.$refs.printContent, {
backgroundColor:
null
,
useCORS:
true
,
windowHeight: document.body.scrollHeight
}).then((canvas)
=>
{
//
let url = canvas.toDataURL('image/jpeg', 1.0)
const url =
canvas.toDataURL()
this
.img =
url
printJS({
printable: url,
type:
'image'
,
documentTitle:
'打印图片'
console.log(url)
</script>
补充内容:
因为我自己有段时间没使用了,对于现在版本的一些问题也没遇到,最近有看到博友提了几个问题,
这两天有时间就看了下,下面把一些自己总结的问题和解决方法附上,可能图片比较多,不过我也是希望尽可能详细描述原因而不只是给个解决方法.
相关githup源码也会尽快更新,有帮助记得点歌star哦
PS: 因为这些问题是组件原本存在的,修改需要改组件源码,不要在node_modlues下直接修改,把这个vue-print-nb安装包复制出来,放在你自己的项目文件下,
一开始复制的时候可能没有src这个目录,没什么关系,运行一下就会自动生成的,拿出来之后,也要修改mian.js的引入方法,引入lib下的tag_textarea.umd这个文件
在这里更正一下,修改文件,因为我测试用的项目是有对es5语法进行转译的,
tag_textarea.umd是es5语法,就可以使用,但是我之后放到另一个vue项目,引入报了es5的语法错误,
这里也非常感谢博友的评论提醒,差点误导大家,如果你的项目不支持es5语法,引入src下的文件,修改print.js和printarea.js这两个文件,改动地方一样可以搜索一下代码,我githup上
三.隐藏不需要打印的内容
如果打印的时候不需要打印全部内容,可以再打印之前,删除不需要打印的元素,具体方法
在print.js文件里新增一个属性ignoreClass,用来隐藏不需要打印的元素
在printarea.js里也要增加,再增加一个去除隐藏元素的方法
ps: 2021/9/11更新内容
1.增加表单打印内容,在页面增加了一个form表单,如果你直接打印,CheckBox和radio可能不能显示,可以设置一下打印属性,勾选上背景图片,就可以显示了
2.增加el-table打印,el-table默认单元格的宽度是px,这在打印时会出现显示不全问题
可以处理一下,将宽度改为百分比
注意,你需要先将td的宽度添加百分比,详细写法可以看我githup的例子
处理过的打印预览
更新: 打印标题显示
如果打印时不想要标题,在打印设置中取消勾选页眉和页脚.这个是打印网页自带的,代码中好像不能直接去掉.
结语: 我写的这些处理方法也并不是唯一的,这个组件的原理其实就是将你页面的元素copy过去,重新创建一个打印页面,你完全可以在调用打印方法前对元素进行修改
这两个对应的githup代码都已经更新了,可以clone下来看看,有用帮我点个star哈. 有问题留言,有时间我会一起整理更新,
