黑马苏杰豪

在前端开发中，我们经常会遇到需要将网页内容导出为PDF的需求。本文将以一个准考证预览和导出的例子，带你一步步实现这个功能。我们会处理包括跨域图片、Canvas绘图、PDF生成等多个技术要点。首先，我们需要搭建一个基础的HTML结构，并引入必要的依赖。这里我们引入了两个重要的库：接下来，我们创建一个简单的准考证预览界面：三、处理跨域图片问题在处理外部图片时，我们首先需要解决跨域问题。运维：需设置图片允许跨域访问，以阿里云 OSS 跨域规则配置为例。前端：先检测图片是否支持跨域访问，支持图片跨域访问的情

样式应用方式HTML/CSS：使用选择器和属性声明样式ArkUI：使用链式API直接在组件上设置样式布局容器HTML：使用<div>等标签，配合CSS实现布局ArkUI：使用专门的布局组件如ColumnRow等组件，配合样式属性布局单位使用HTML/CSS：使用 px、em、rem、百分比等单位ArkUI：使用 px、vp、lpx 、百分比等单位，使用数字单位 vp 可省略样式继承HTML/CSS：通过CSS选择器实现样式继承ArkUI：没有样式继承。

node-sass依赖node版本，而sass则不需要。解决方案：卸载node-sass，安装sass，项目全局搜索/deep/, 把/deep/替换为::v-deep即可。

本系列教程适合 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。> 本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。

Win 键 + Q ，在搜索框内输入 Powershell。点击以管理员身份运行 Powershell，注意需要管理员身份证。粘贴代码按回车键执行命令。输入字母A，按回车键确认。重启所有 PowerShell 终端就可以啦。

不知道大家有没有留意到一个问题，就是使用 VsCode 新建的 html 文件的，根标签会有 `lang="en"` 。这样会导致打开网页的时候，浏览器的右上角会蹦出一个翻译英文提示。

`json-server` 是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 API，尤其适合前端接口测试使用。🔥🔥🔥只需指定一个 `json` 文件作为 `api` 的数据源即可，使用起来非常方便，30 秒入门，基本上有手就行。👍进阶操作还支持分页，排序等操作，简直强大。💪

生产环境：推荐使用NITRO_PORT=端口方式来修改端口，开发环境：推荐通过的配置或命令行参数--port来修改端口，可以灵活地为Nuxt3应用配置不同的端口，满足开发和部署的需求。