vuecli + ts 使用 js-cookie

安装

npm install --save @types/js-cookie
npm install --save js-cookie

main.ts

// 增加
import './common/js-cookie';

项目中增加 index.ts

import Vue from 'vue'
import Cookies from 'js-cookie';
Vue.prototype.$Cookies = Cookies;

页面中使用:

 private $Cookies: any;
 get userNo(): number {
     return this.$Cookies.get('userNo');  // 这个就是后台传的cookie中的userNo
 }

亲测可用。有问题留言。

如何使用js-cookie请点击

Vue 3和TypeScript可以使用pdfjs-dist库来预览PDF文件。下面是一个简单的示例代码,演示如何在Vue 3和TypeScript中使用pdfjs-dist库进行PDF预览: 首先,你需要安装pdfjs-dist库。可以通过npm或者yarn命令来安装: ```shell npm install pdfjs-dist ``` 或者 ```shell yarn add pdfjs-dist ``` 接下来,在你的Vue组件中引入pdfjs-dist库并创建一个用于显示PDF内容的容器元素: ```html <template> <div> <canvas ref="pdfCanvas"></canvas> </div> </template> ``` 在组件的`mounted`生命周期钩子中,你可以使用pdfjs-dist来加载PDF文件并在Canvas上渲染它: ```typescript import { ref, onMounted } from 'vue'; import * as pdfjs from 'pdfjs-dist'; export default { setup() { const pdfCanvas = ref<HTMLCanvasElement | null>(null); let loadingTask: any; onMounted(async () => { try { const pdf = await pdfjs.getDocument('path/to/your/pdf'); // 替换为你的PDF文件路径 if (pdf) { const page = await pdf.getPage(1); // 获取第一页(页码从0开始) if (page) { const viewport = page.getViewport({ scale: 1 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const context = canvas.getContext('2d'); page.render({ canvasContext: context, viewport }).then(() => { pdfCanvas.value = canvas; // 将渲染后的Canvas赋值给组件中的容器元素 }); } else { console.error('Failed to render PDF page'); } } else { console.error('Failed to load PDF document'); } } catch (error) { console.error('Error rendering PDF:', error); } finally { if (loadingTask) { loadingTask.cancel(); // 确保在组件销毁时取消加载任务以避免内存泄漏 } } }); return { pdfCanvas }; }, }; ``` 以上代码会在Vue组件中创建一个Canvas元素,并在该元素上渲染PDF的第一页。你可以根据需要修改代码以适应不同的PDF文件和页面范围。记得将`'path/to/your/pdf'`替换为你实际的PDF文件路径。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值