最后
我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
篇幅有限,仅展示部分截图:
}
}
```
为了好看一些,我给操作按钮写了样式
<style lang="scss" scoped>
.page-tool {
display: flex;
position: absolute;
top: 5px;
left: 50%;
z-index: 100;
transform: translateX(-50%);
align-items: center;
background: rgb(66 66 66);
color: white;
border-radius: 19px;
cursor: pointer;
justify-content: center;
font-size: 15px;
}
.page-tool-item {
padding: 4px 10px;
cursor: pointer;
}
</style>
最终的实现效果:
打印:
const { proxy } = getCurrentInstance()
<div @click='print'>打印</div>
<script setup>
function print(){
proxy.$refs['pdf'].print()
}
</script>
方法二:使用pdfjs-dist,canvas渲染,pdf.js打印
说明:pdf.js可以打印canvas数据,所以选择这个插件
①首先,安装依赖
pnpm install pdfjs-dist
安装之后,在项目的node_modules文件夹里,找到pdfjs-dist ->build->pdf.worker.js文件,拷贝出来放到public根目录下,接着找到pdfjs-dist ->cmaps文件夹,拷贝一下放到public->static文件夹里,如下图所示:
②下载print.js放入项目中,在需要使用的页面,引入方法,然后方法调用
具体我是参考的这篇博文:前端使用print.js实现打印_printjs_@我不认识你的博客-CSDN博客
③代码实现
// 打印按钮
<div @click="print">打印</div>
//pdf预览显示
<div>
<div id="printDom" ref="printDom">
<div v-for="item in state.numPages" :key="item">
<canvas :id="`pdfCanvas-${item}`" :ref="`pdfCanvas-${item}`" />
</div>
</div>
</div>
<script setup>
import * as pdfjsLib from 'pdfjs-dist' //引入pdfjs-dist
import Print from '@/assets/js/print' //引入print.js
const { proxy } = getCurrentInstance()
const state = reactive({
pageNum: 0, // 当前页面
scale: 1, // 缩放比例
numPages: 0, // 总页数
pdfCtx: null // pdf对象
})
onMounted(()=>{
// 请求服务接口,获取pdf存放地址,赋值给pdfUrl变量(此处省略请求代码)
// pdfUrl获取到之后,接着执行以下代码
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
const loadingTask = pdfjsLib.getDocument({
url: pdfUrl, //这里的pdfUrl即pdf的链接地址
cMapUrl: '../../../../static/cmaps/',
cMapPacked: true
})
loadingTask.promise.then(pdf => {
// console.log('页数', pdf.numPages)
state.numPages = pdf.numPages
state.pdfCtx = pdf
nextTick(() => {
renderPdf()
})
})
})
const renderPdf = (num = 1) => {
state.pdfCtx.getPage(num).then(page => {
const canvas = document.getElementById(`pdfCanvas-${num}`)
const ctx = canvas.getContext('2d')
const viewport = page.getViewport(1.6)
canvas.height = viewport.height
canvas.width = viewport.width
page.render({
canvasContext: ctx,
viewport: viewport
})
if (num < state.numPages) {
renderPdf(num + 1)
}
})
}
//打印
function print(){
Print(proxy.$refs['printDom'])
}
</script>
总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。