Category Archives: Frontend

Vue3 — PDF展示、添加签名（带笔锋）、导出

文章目录
笔锋签名
方案一
实现要点
实现过程
组件引用
页面元素
添加引用
实现代码
效果展示
缺点
方案二
修改页面元素
替换引用
修改代码
效果展示
完整代码地址

实现功能的时候采用了两个方案，主要是第一个方案最后的实现效果并不太理想，但实现起来比较简单，要求不高时可以使用。

该
DEMO 会一次性加载并展示所有的
PDF 页面，目的是方便在手机上观看时上下滑动，如果要做成上一页下一页的效果，需要自行实现。

龙生 13 Jan 2024

smooth-signature：H5前端canvas实现带笔锋手写签名，支持PC端和移动端使用，无框架限制，Vue、React等均可使用

我们平时纸上写字，细看会发现笔画的粗细是不均匀的，这是写字过程中，笔的按压力度和移动速度不同而形成的。而在电脑手机浏览器上，虽然我们无法获取到触摸的压力，但可以通过画笔移动的速度来实现不均匀的笔画效果，让字体看起来和纸上写字一样有“笔锋”。

龙生 13 Jan 2024

View Details

npm设置国内源（淘宝镜像源），解决npm包下载速度慢的问题

因为众所周知的原因，我们从拉取从官方源拉取npm 依赖，经常容易出现超时，拉取失败的情况。这个时候我们就非常有必要切换使用国内源了，如淘宝源等
npm config set registry https://registry.npm.taobao.org

龙生 13 Jan 2024

View Details

Node.js 服务端的 JavaScript，所有的包依赖、开发脚手架都是基于node.js的。下载地址：https://nodejs.org/en/ Python 有些依赖包是python写的。下载地址：https://www.python.org/downloads/release/python-2717/ Vscode 微软开源轻量级IDE，插件多，受众广泛。下载地址：https://visualstudio.microsoft.com/zh-hans/downloads/ 安装过node.js之后，就可以cmd下查看npm的版本了，vue2要求npm的版本3.0以上。用以下命令查看npm版本：npm -v 使用淘宝 NPM 镜像安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org npm设置为淘宝镜像 npm config set registry https://registry.npm.taobao.org #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g # 全局安装 vue-cli npm install --global vue-cli 创建Vue项目 vue init webpack {project name}

龙生 13 Jan 2024

View Details

node 版本与 node-sass node-loader 版本的对应关系

node 版本与 node-sass 版本的对应关系：其一、查看文档的地址： https://www.npmjs.com/package/node-sass 其二、对应关系的表格：对应版本 node16 “node-sass”: “6.0.1” “sass-loader”: “10.2.0” node: v14.19.0; node-sass: ^4.14.1; sass-loader: ^7.3.1; from:https://blog.csdn.net/weixin_38345306/article/details/132311818

龙生 12 Jan 2024

View Details

js保留两位小数总结

var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45

龙生 18 Dec 2023

View Details

基于vue的表单设计器（拖拽生成表单）

日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。码云仓库： form-generator: Element UI表单设计及代码生成器演示地址： form-generator 安装依赖：

1	npm install

JSON解析器：

1 2	// 安装 npm i form-gen-parser

vscode插件 form-generator-plugin 此项目将form-generator的vscode-plugin分支封装为一个vscode插件，拓展了form-generator的文件写入能力；帮助使用element UI的开发者完成基本的表单代码搭建任务，减少重复的劳动。 2. 基于vue+ant-design-vue的表单设计器 k-form-design 设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速。 github仓库：https://github.com/Kchengz/k-form-design 演示地址：http://cdn.kcz66.com/form-design.html 组件 KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面） KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）安装

# 使用yarn

yarn add k-form-design

# 使用npm

npm i k-form-design --save

引入组件

// 在main.js引入

import KFormDesign from 'k-form-design'

import 'k-form-design/lib/k-form-design.css'

Vue.use(KFormDesign)

使用组件

<div>

<k-form-design />

</div>

</template>

3.基于vue的表单生成器（支持iview，element-ui,ant-design-vue） form-create form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件。安装 iview

1	npm install @form-create/iview

iview

1	npm install @form-create/iview4

element-ui

1	npm install @form-create/element-ui

ant-design-vue

1	npm install @form-create/ant-design-vue

4.基于vue+ElementUI的表单设计器 form-designer 码云仓库：https://gitee.com/wurong19870715/formDesigner 演示地址：http://wurong19870715.gitee.io/formdesigner from:https://blog.csdn.net/weixin_43765747/article/details/122995904

龙生 01 Dec 2023

View Details

前端调用浏览器打印判断用户点击确认还是取消

window监听到打印的beforePrint和afterPrint两个事件，但是无论点击打印还是取消都会触发afterPrint事件，所以只能通过这个事件的触发让用户自己判断是否打印成功，以此来记录数据是否打印或者是打印了几次，以下是打印的方法

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

// import Vue from "vue";

import { productionPlanPrint } from '@/api/prodPlan'

const isDOM = (obj) => {

return typeof HTMLElement === 'object'

? obj instanceof HTMLElement

: obj &&

typeof obj === 'object' &&

obj.nodeType === 1 &&

typeof obj.nodeName === 'string'

}

/* const extend = (obj, obj2) => {

for (const k in obj2) {

if (obj2.hasOwnProperty(k)) obj[k] = obj2[k]

}

return obj

} */

const isInBody = (node) => {

return node === document.body ? false : document.body.contains(node)

}

const wrapperRefDom = (refDom) => {

let prevDom = null

let currDom = refDom

if (!isInBody(currDom)) return currDom

while (currDom) {

if (prevDom) {

const element = currDom.cloneNode(false)

element.appendChild(prevDom)

prevDom = element

} else {

prevDom = currDom.cloneNode(true)

}

currDom = currDom.parentElement

}

return prevDom

}

const getStyle = (options) => {

let str = ''

const styles = document.querySelectorAll('style,link')

for (let i = 0; i < styles.length; i++) {

str += styles[i].outerHTML

}

str +=

'<style>' +

(options.noPrint ? options.noPrint : '.no-print') +

'{display:none;}</style>'

return str

}

const getHtml = (dom, options) => {

const inputs = document.querySelectorAll('input')

const textAreas = document.querySelectorAll('textarea')

const selects = document.querySelectorAll('select')

for (let k = 0; k < inputs.length; k++) {

if (inputs[k].type === 'checkbox' || inputs[k].type === 'radio') {

if (inputs[k].checked === true) {

inputs[k].setAttribute('checked', 'checked')

} else {

inputs[k].removeAttribute('checked')

}

} else if (inputs[k].type === 'text') {

inputs[k].setAttribute('value', inputs[k].value)

} else {

inputs[k].setAttribute('value', inputs[k].value)

}

for (let k2 = 0; k2 < textAreas.length; k2++) {

if (textAreas[k2].type === 'textarea') {

textAreas[k2].innerHTML = textAreas[k2].value

}

for (let k3 = 0; k3 < selects.length; k3++) {

if (selects[k3].type === 'select-one') {

const child = selects[k3].children

for (const i in child) {

if (child[i].tagName === 'OPTION') {

if (child[i].selected === true) {

child[i].setAttribute('selected', 'selected')

} else {

child[i].removeAttribute('selected')

}

return options.noPrintParent ? dom.outerHTML : wrapperRefDom(dom).outerHTML

}

// var flag = false

const toPrint = (frameWindow, target, id) => {

// var beforePrint = function() {

// // console.log('beforePrint');

// }

// var afterPrint = function() {

// flag = true

// // console.log('afterPrint')

// // target.$confirm('是否打印成功', '提示', {

// // confirmButtonText: '成功',

// // cancelButtonText: '失败',

// // type: 'warning'

// // }).then(() => {

// // flag = true

// // // console.log('ddd',id)

// // // productionPlanPrint({ id }).then(res =>{

// // // console.log('rrr', res)

// // // if (res.code==200){

// // // target.$message({

// // // type: 'success',

// // // message: '打印数据更新成功'

// // // })

// // // }

// // // })

// // }).catch(() => {

// // target.$message({

// // type: 'info',

// // message: '未成功打印'

// // })

// // return flag

// }

// if (frameWindow.matchMedia) { // 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

// var mediaQueryList = frameWindow.matchMedia('print')

// mediaQueryList.addListener(function(mql) {

// // console.log('fff',mql)

// if (mql.matches) {

// beforePrint()

// } else {

// afterPrint()

// }

// })

// }

// window.onbeforeprint = beforePrint;

// window.onafterprint = afterPrint;

try {

setTimeout(function() {

frameWindow.focus()

try {

// var mediaQueryList = frameWindow.matchMedia('print')

// mediaQueryList.addListener((mql)=> {

// console.log('aaa',mql.matches)

// // if (mql.matches) {

// // beforePrint();

// // } else {

// // afterPrint();

// // }

// })

// console.log('打印',!frameWindow.document.execCommand('print', false, null))

if (!frameWindow.document.execCommand('print', false, null)) {

frameWindow.print()

// console.log('打印1')

}

} catch (e) {

frameWindow.print()

// console.log('打印2')

}

frameWindow.close()

}, 10)

} catch (err) {

console.log('err', err)

}

const writeIframe = (content, target, id) => {

const iframe = document.createElement('iframe')

const f = document.body.appendChild(iframe)

iframe.id = 'myIframe'

iframe.setAttribute(

'style',

'position:absolute;width:0;height:0;top:-10px;left:-10px;'

)

const w = f.contentWindow || f.contentDocument

const doc = f.contentDocument || f.contentWindow.document

doc.open()

doc.write(content)

doc.close()

iframe.onload = function() {

// w.onafterprint = e=>{

// console.log('打印后',e)

// }

toPrint(w, target, id)

setTimeout(function() {

document.body.removeChild(iframe)

// console.log('iii')

}, 100)

}

return w

}

const Print = (dom, options, target, id) => {

// console.log('ddd',target)

options = { ...options, noPrint: '.no-print' }

let targetDom

if (typeof dom === 'string') {

targetDom = document.querySelector(dom)

} else {

targetDom = isDOM(dom) ? dom : dom.$el

}

const content = getStyle(options) + getHtml(targetDom, options)

const w = writeIframe(content, target, id)

// console.log('ddd',flag)

return w

}

export default Print

调用方法后监听iframe的afterPrint事件

// 打印BOM清单

printTable(val) {

let _this = this

// console.log('打印',this.printTableData)

// console.log('dd',this.printTableTitle.id)

this.isShow = true

setTimeout(async() => {

const frameWindow = await VabPrint(this.$refs[val], { noPrintParent: true }, this,this.printTableTitle.id)

// console.log('dddd',result)

// 打印前

var beforePrint = function() {

// console.log('beforePrint');

}

// 打印后

var afterPrint = function() {

// console.log('afterPrint')

_this.$confirm('是否打印成功', '提示', {

confirmButtonText: '成功',

cancelButtonText: '失败',

type: 'warning'

}).then(() => {

// console.log('ddd',id)

productionPlanPrint({ id: _this.printTableTitle.id }).then(res => {

// console.log('rrr', res)

if (res.code==200){

_this.$message({

type: 'success',

message: '打印数据更新成功'

})

_this.drawer = false

_this.handleQuery(_this.pageNum)

}

})

}).catch(() => {

_this.$message({

type: 'info',

message: '未成功打印'

})

}

if (frameWindow.matchMedia) { // 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

var mediaQueryList = frameWindow.matchMedia('print')

mediaQueryList.addListener(function(mql) {

// console.log('fff',mql)

if (mql.matches) {

beforePrint()

} else {

afterPrint()

}

})

}

this.isShow = false

}, 10)

}

from:https://blog.csdn.net/soclear_/article/details/127439860

龙生 09 Nov 2023

View Details

jquery 打印方法 jquery打印网页

今天利用闲余时间研究了一下Jquery Jqprint插件，使用该Jquery脚本可以轻而易举的实现打印网页指定区域内容的功能：例子一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Jquery Jqprint打印控件演示</title>

html,body{margin:auto 15%;padding:0;}

p{line-height: 18px;}

</style>

function print(){

$("#printContainer").jqprint();

}

</script>

</head>

<body>

<p> 太史公牛马走司马迁再拜言。少卿足下：曩者辱赐书，教以慎于接物，推贤进士为务。意气勤勤恳恳，若望仆不相师，而用流俗人之言。仆非敢如是也。请略陈固陋。阙然久不报，幸勿为过。</p>

<p> 仆之先人，非有剖符丹书之功，文史星历，近乎卜祝之间，固主上所戏弄，倡优畜之，流俗之所轻也。假令仆伏法受诛，若九牛亡一毛，与蝼蚁何以异？而世又不与能死节者比，特以为智穷罪极，不能自免，卒就死耳。何也？素所自树立使然。人固有一死，或重于泰山，或轻于鸿毛，用之所趋异也。太上不辱先，其次不辱身，其次不辱理色，其次不辱辞令，其次诎体受辱，其次易服受辱，其次关木索、被棰楚受辱，其次剔毛发、婴金铁受辱，其次毁肌肤、断肢体受辱，最下腐刑极矣！传曰：“刑不上大夫。”此言士节不可不勉励也。猛虎处深山，百兽震恐，及在穽槛之中，摇尾而求食，积威约之渐也。故士有画地为牢，势不入；削木为吏，议不对，定计于鲜也。今交手足，受木索，暴肌肤，受榜棰，幽于圜墙之中。当此之时，见狱吏则头枪地，视徒隶则心惕息。何者？积威约之势也。及以至是，言不辱者，所谓强颜耳，曷足贵乎！且西伯，伯也，拘于羑里；李斯，相也，具于五刑；淮阴，王也，受械于陈；彭越、张敖，南向称孤，系狱具罪；绛侯诛诸吕，权倾五伯，囚于请室；魏其，大将也，衣赭衣、关三木；季布为朱家钳奴；灌夫受辱居室。此人皆身至王侯将相，声闻邻国，及罪至罔加，不能引决自裁，在尘埃之中，古今一体，安在其不辱也！此言之，勇怯，势也；强弱，形也。审矣，何足怪乎？且人不能早自裁绳墨之外，已稍陵迟，至于鞭棰之间，乃欲引节，斯不亦远乎！古人所以重施刑于大夫者，殆为此也。</p>

<p> 夫人情莫不贪生恶死，念亲戚，顾妻子；至激于义理者不然，乃有所不得已也。今仆不幸，早失父母，无兄弟之亲，独身孤立，少卿视仆于妻子何如哉？且勇者不必死节，怯夫慕义，何处不勉焉！仆虽怯懦，欲苟活，亦颇识去就之分矣，何至自沉溺累绁之辱哉！且夫臧获婢妾，犹能引决，况若仆之不得已乎？所以隐忍苟活，幽于粪土之中而不辞者，恨私心有所不尽，鄙陋没世，而文采不表于后也。</p>

<p> 古者富贵而名摩灭，不可胜记，唯倜傥非常之人称焉。盖西伯拘而演《周易》；仲尼厄而作《春秋》；屈原放逐，乃赋《离骚》；左丘失明，厥有《国语》；孙子膑脚，《兵法》修列；不韦迁蜀，世传《吕览》；韩非囚秦，《说难》、《孤愤》；《诗》三百篇，大底圣贤发愤之所为作也。此人皆意有所郁结，不得通其道，故述往事，思来者。乃如左丘无目，孙子断足，终不可用，退而论书策，以舒其愤，思垂空文以自见。</p>

<p> 仆窃不逊，近自托于无能之辞，网罗天下放失旧闻，略考其行事，综其终始，稽其成败兴坏之纪。上计轩辕，下至于兹，为十表、本纪十二、书八章、世家三十、列传七十，凡百三十篇。亦欲以究天人之际，通古今之变，成一家之言。草创未就，会遭此祸，惜其不成，是以就极刑而无愠色。仆诚已著此书，藏之名山，传之其人，通邑大都。则仆偿前辱之责，虽万被戮，岂有悔哉！然此可为智者道，难为俗人言也。</p>

<p> 且负下未易居，下流多谤议。仆以口语遇遭此祸，重为乡党所笑，以污辱先人，亦何面目复上父母之丘墓乎？虽累百世，垢弥甚耳！是以肠一日而九回，居则忽忽若有所亡，出则不知其所往。每念斯耻，汗未尝不发背沾衣也。身直为闺合之臣，宁得自引深藏于岩穴邪？故且从俗浮沉，与时俯仰，通其狂惑。今少卿乃教以推贤进士，无乃与仆私心剌谬乎？今虽欲自雕琢，曼辞以自饰，无益于俗，不信，适足取辱耳。要之死日，然后是非乃定。书不能悉意，略陈固陋。谨再拜。</p>

</div>

</body>

</html>

例子二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Jquery Jqprint打印控件演示</title>

html,body{margin:auto 15%;padding:0;}

p{line-height: 18px;}

</style>

function print(){

$("#printContainer").jqprint({

debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false

importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）

printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。

operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true

});

}

</script>

</head>

<body>

</div>

</body>

</html>

from:https://blog.51cto.com/u_16099297/6962748

龙生 09 Nov 2023

View Details

web端js调用window.print()的回调函数（打印前和打印后的回调）

$(function () {

//定义打印前事件

var beforePrint = function () {

console.log("打印前");

};

//定义打印后事件

var afterPrint = function () {

console.log("打印后");

app.post('ba.service.CompanyService', 'updateCompany', {

'companyId': companyId,

"autoRegStateCode":"40"

})

.then(function (res) {

});

}

//监听window状态

if (window.matchMedia) {

var mediaQueryList = window.matchMedia('print');

//为印添加事件

mediaQueryList.addListener(function (mql) {

if (mql.matches) {

beforePrint();

} else {

afterPrint();

}

});

}

//打印前事件

window.onbeforeprint = beforePrint;

//打印后事件

window.onafterprint = afterPrint;

//执行打印

$(".print").click(function () {

$(".print").hide()

var newstr = document.getElementById("printPage").innerHTML;

window.print();

$(".print").show()

})

});

from:https://codeleading.com/article/96272527602/#google_vignette

龙生 09 Nov 2023

View Details

« Previous 1 2 3 4 … 60 Next »