Cloudinary提供了一个有趣的特性：能够从PDF文件和页面生成图像。使用Cloudinary，您可以为预览目的创建文档的缩略图。当您不想授予用户对内容的访问权限，但需要让他们在没有下载PDF文件的情况下，可以偷偷地看到他们缺少的内容但是，在在这个博客中，我们将分享一个使用Cloudinary构建此类解决方案的实际例子。以下是您需要的工具：Cloudinary：端到端的图像和视频管理服务Vue：渐进式JavaScript框架网络研讨会创建Vue项目开始Vue项目的最佳和最简单的方法是通过命令行工具。您可以使用以下命令将其与npm一起安装命令：复制到剪贴板npm安装-g vue cli此安装将Vue命令公开给CLI，您可以使用CLI执行各种任务，包括创建新的Vue项目。下面是创建新的项目：复制到剪贴板vue初始化简单pdf查看器simple是我们更喜欢使用的项目模板作为非常简单的示例，而pdf viewer是我们所使用的项目的名称创造。这个命令创建一个文件，索引.html有一些简单的标记。请随意清空此文件并替换为以下：复制到剪贴板在在

PDF查看器

上传PDF文件

在在我们的大多数依赖项都是通过内容交付网络（CDN）包括引导、Vue和Cloudinary JavaScript SDK来实现的。我们还包括样式.css以及脚本.js我们需要创建的文件。有三个引导生成的行：第一个显示PDF页面的大预览，并且仅当Vue实例上的file属性不为null时才处于活动状态。它的src属性绑定到preview属性的图像。第二行使用Vue实例上的pages数组将PDF的缩略图显示为图像。单击每个图像时，将调用selectImage方法以更新较大的查看器。最后，第三个包含打开Cloudinary上载小部件的按钮。在我们开始看到实际的逻辑之前，创建一个/样式.css并更新以下基本CSS:复制到剪贴板html，正文，#应用程序，#容器{高度：100%；}.预览{边缘顶部：40px；}图像{显示：块；余量：自动；边框：#E1E1E1；盒形阴影：0px 3px 6px 0px rgba（0,0,0,0.3）；}。上传{边缘顶部：30%；左缘：14%；}按钮{颜色：687DDB；填料：10px 15px；边框：#e1e1e1；背景：fff；边界半径：4px；}#应用程序{背景：687DDB；}.页{上页边距：20px}使用Cloudinary widget上传图像现在我们有了一个平台，让我们开始上传PDF文件。首先创建前面包含的JavaScript文件。接下来，创建一个Vue实例并添加上载方法图像：复制到剪贴板新Vue({el:"#应用程序"，方法：{openWidget（url）{window.cloudinary.openUploadWidget({cloud_name:'云端名称'，upload_preset:'上传预设'，标签：['pdf']，资料来源：["本地"，'url'，]},（错误，结果）=>{控制台.log（误差，结果）；});}}});当点击按钮时，上传窗口小部件会弹出，看起来像这个：openUploadWidget方法接受一个config和一个回调方法。配置必须至少有一个在创建帐户时分配的云名称和可以从设置生成的未签名上载预置仪表板一旦上载成功并传递上载的有效负载，就会触发回调函数信息。显示预览和缩略图加载PDF文件将结果记录到控制台。因此，我们需要在查看。复制到剪贴板新Vue({el:"#应用程序"，数据：{文件：空，预览：空，页码：【】},方法：{openWidget（url）{window.cloudinary.openUploadWidget({cloud_name:'christekh'，upload_preset:'qbojwl6e'，标签：['pdf']，资料来源：["本地"，'url'，]},（错误，结果）=>{控制台.log（误差，结果）；this.file文件=结果[0]；此。预览= `https://res.cloudinary.com/christekh/image/upload/wŞ，h_400，c_fill，第1页/${此.file.public_id}.jpg`；对于（设i=1；i