使用 JavaScript 和 CSS 做一个图片转 PDF 的转换器
💂 个人网站:【 海拥】【摸鱼小游戏】
🤟 风趣幽默的前端学习课程：👉28个案例趣学前端
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
哈喽大家好，我是 海拥 ，专注于前端知识的分享。今天将给大家带来的是使用 JS 和 CSS 做一个图片到 PDF 的转换器，可以说是非常的实（duo）用（yu）了。
大家一定要记得点赞收藏呀！！！
这是一个比较简单的 JavaScript 项目，可以将图片转换为 PDF 文件。不过除了图片之外的其他文件类型暂时还转换不了（别问，问就是能力有限）。我们可以从 HTML 中获得不同类型的输入。其中之一就是文件，这里我选择用只接受输入”.png, .jpg, .jpeg”中的图片，所以你们也只能选择这些图片类型。
JavaScript 实现图片转 PDF在线演示地址：https://haiyong.site/tools/pdf.html
如你所见，已在渐变背景上创建了一个框。首先，这个盒子有一个小显示器。你 ...
60 个前端 Web 开发流行语你都知道哪些？
💂 个人网站:【 海拥】【摸鱼小游戏】
🤟 风趣幽默的前端学习课程：👉28个案例趣学前端
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
不想在你朋友讨论 Web 前端开发时感到一头雾水？今天海海给大家带来了 60 个 Web 前端开发的术语，看看你知道的有多少。以下列表是按照字母顺序排列的：
1.API“应用程序接口”(Application Program Interface)的缩写，计算机和应用程序如何相互通信。
2.Application通常缩写为“App”，这些是旨在执行功能的程序。可能指桌面、移动甚至网络应用程序。
3.Attribute(属性)属性是在开始标签中使用的特殊词，用于控制 HTML 元素的行为
4.Breakpoint(断点)这是你的网站将调整以适应屏幕尺寸以确保用户在该尺寸下查看网站时获得最佳体验的时间点。
5.Browser(浏览器)用于访问 Web 的程序，例如 Chrome、Firefox 或 Safa ...
HTML 实现仿 Windows 桌面主题特效
💂 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】
🤟 风趣幽默的人工智能学习网站：👉人工智能
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
**本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：**
🌟【100个摸鱼小游戏】（源码永久免费开源）
直接跳到末尾 参与评论送书直接跳到末尾 领取完整源码快速跳转 如何高效学习
目前已上线的小游戏有50+个
游戏入口地址有多个：
摸鱼入口：https://haiyong.site/moyu/
海拥开发文档：https://haiyong.site/doc/
GitHub 源码：https://github.com/wanghao221/moyu
@TOC
在线演示地址：https://haiyong.site/win/
源码可在文末免费获取
✨ 项目基本结构目录结构如下：
123456 ...
使用IntelliJ IDEA Maven 输出 Hello World
1.创建Maven项目在IntelliJ IDEA的启动欢迎界面中点击Create New Project：
在New Project对话框的左侧选中Maven，在右侧确认JDK版本无误后，即可点击Next到下一步：
先确定项目的名称，检查项目的保存位置，并展开Artifact Coordinates，填写GroupId与ArtifactId，其实这2项并不是必须填写的，按照开发规范应该填写，而且，ArtifactId的值应该全部由小写字母组成，如果由多个单词组成，则各单词之间使用减号进行分隔，全部填写无误后，点击Finish按钮即可完成创建：
2.添加并使用依赖项目创建成功后，默认会打开pom.xml文件，该文件在项目的根目录下，项目中需要添加依赖时，相关的代码就需要配置在这个文件中。
在项目结构中，src下有main和test这2个文件夹，main文件夹用于存放正式使用的相关文件，例如Java类、各种配置文件等，test用于存放开发过程中测试时使用的文件，当项目最终编译、打包、部署到服务器时，test文件夹下的所有内容将不会参与这个过程。
先在项目中创建cn.tedu包，在 ...
使用 IntelliJ IDEA Java Web 输出 Hello World
1.下载Tomcat首先，下载Apache Tomcat并解压到本地计算机，可存放于任何位置。
另外，需要在系统中环境JRE_HOME环境变量，以保证Tomcat可以正常启动，具体配置方式请参考其它教程。
2.创建Java Web项目在IntelliJ IDEA的欢迎主界面中，点击Create New Project：
在New Project对话框的左侧选择Java Enterprice，在右侧确保Project SDK是1.8版本，Java EE version为Java EE 8（也可以是略低的其它版本）：
由于是第1次使用，尚未配置Tomcat，需要点击Application Server右侧的New按钮，并在弹出的菜单中选择Tomcat Server：
在弹出的Tomcat Server对话框中，在Tomcat Home栏浏览到第1步下载的Tomcat目录，并点击OK：
回到New Project对话框，在Additional Libraries and Frameworks的列表中，勾选Web Application (4.0)，然后点击Next到下一步：
填写 ...
在 IntelliJ IDEA 中使用 Java 输出 HelloWorld
1.创建项目在IntelliJ IDEA的欢迎主界面中，点击Create New Project即可创建新的项目：
2.设置项目类型默认情况下的项目类型是Java，本次的案例目标是HelloWorld，则该选项保持不变即可。
右侧可以选择JDK的版本，如果默认已经选中了1.8版，则不需要修改，直接点击Next到下一步即可：
3.选择项目模版IntelliJ IDEA可以基于模版创建项目，由于本次需要创建的项目非常简单，不需要使用模版，直接点击Next到下一步即可：
4.确定项目名称及保存位置在Project name一栏输入HelloWorld，以确定项目名称；
在Project location一栏确定项目的保存位置，推荐使用专门的文件夹用于保存IntelliJ IDEA开发的项目（相当于使用Eclipse时用到的Workspace），并将当前项目保存到该文件夹中！注意：当修改了Project location后，可能不会自动在路径中添加项目名称作为保存当前项目的子级文件夹名称，需要手动添加；
展开下方的More Settings可以修改更多设置，一般不需要修改，直接点击Nex ...
为 IntelliJ IDEA 安装插件
1.安装插件插件是开发工具的扩展程序，通常由第三方提供，当安装了插件后，原开发工作的菜单、按钮等开发环境可能会发生变化，例如出现了新的菜单项，或出现了新的按钮，甚至一些全新的编码方式，通常，使用插件可以使得开发某些代码或实现某些功能时更加简便。
绝大部分的插件的安装方式都是相同的，另有一部分插件在安装成功后可能还需调整某些设置后才可以正常使用。
本次演示安装的插件是Lombok，它可以使得开发人员在编写类时，定义了属性后，不必再添加Getters & Setters、hashCode & equals、toString等方法，只需要添加相关注解即可。
首先，打开IntelliJ IDEA的设置（在启动界面中打开，或通过主界面的File菜单中Settings选项打开均可）：
在设置界面的左侧点击Plugins，在右侧的搜索输入框中输入lombok进行搜索，当出现了Lombok结果项后，点击对应的Install按钮即可开始安装：
IntelliJ IDEA会自动下载并安装插件：
当安装完成后，会出现Restart IDE按钮，点击后IntelliJ IDEA将重启，所 ...
IntelliJ IDEA安装教程
1.下载阿里云Maven仓库服务器配置文件由于IntelliJ IDEA的默认Maven仓库服务器是Apache平台的，下载文件时较慢，且容易在下载过程中丢失数据而导致文件损坏，所以，需要将Maven仓库服务器配置为国内的站点，例如阿里云或华为云等。
以配置阿里云Maven仓库服务器为例，先打开 https://haiyong.site/doc/ 网站，下载配置文件压缩包：
将下载得到压缩包文件解压，将得到settings.xml文件：
以上文件暂时放在任何位置即可，当安装完IntelliJ IDEA后再使用它。
2.下载IntelliJ IDEA安装包IntelliJ IDEA是目前主流的Java开发工具之一，甚至许多企业在招聘启示中明确要求开发人员掌握IntelliJ IDEA的使用！可以打开浏览器搜索intellij idea关键字，在搜索结果中找到其官方网站https://www.jetbrains.com/idea/并点击进入：
点击主页的DOWNLOAD按钮以打开下载页面：
在下载页面中，可以看到IntelliJ IDEA有Ultimate企业版（终极版）和Comm ...
如何快速拷贝整个网站所有网页
💂 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】
🤟 风趣幽默的人工智能学习网站：👉人工智能
💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】
💬 免费且实用的计算机相关知识题库：👉进来逛逛
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
这里我用的是 win10 系统
1.安装 wget下载地址：https://haiyong.site/doc/
然后将 wget 文件 copy 到C:\Windows\System32目录下即可
2. 键盘 win + r输入
wget -m -U “Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)”-r -k -nc -P 输入你要保存的目录 和 文件夹名称 需要下载的地址
例如：
wget -m -U “Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)”-r -k -nc -P D:\ https://haiyong.site
在 Eclipse 中配置本地安装的 JDK
步骤1：对项目的“JRE System Library”点右键，选择“Build Path”中的“Configure Build Path…”选项
步骤2：在弹出的“Properties for 项目名称”对话框中点击右侧的“Add Library…”按钮
步骤3：在弹出的“Add Library”对话框中选择“JRE System Library”选项，并点击下方的“Next”按钮
步骤4：在弹出的“Add Library”对话框中点击“Installed JREs”按钮
如果此前已经配置过，当前对话框中的第2项“Alternate JRE”对应的下拉列表中会有此前配置的环境，直接选择即可。
步骤5：在弹出的“Preferences”对话框中点击右侧的“Add…”按钮
如果此前已经配置中，当前对话框的列表中会显示此前配置的环境，直接选择即可。
步骤6：在弹出的“Add JRE”对话框中选择“Standard VM”选项，并点击下方的“Next”按钮
步骤7：在弹出的“Add JRE”对话框中点击“Directory…”按钮
步骤8：浏览到本机安装的JDK文件夹， ...
