Online Presentation Application Based On Vue3.x + TypeScript

PPTist

An online presentation application based on Vue3.x + TypeScript, which restores most of the common functions of PPT, supports the 6 most commonly used element types, text, pictures, shapes, lines, charts, and tables, and each element is highly editable Ability, while supporting rich shortcut keys and right-click menus to restore the experience of using local desktop applications as much as possible.

You can do secondary development on it to create your own online presentation application or online design tool (the secondary development document is under preparation).

Online experience address (priority update): https://www.pptist.cn/

If the network status is not good, you can visit the domestic mirror: https://pptist.gitee.io/

Github repository: https://github.com/pipipi-pikachu/PPTist

🚀 Project run

npm install

npm run serve

📜 function list

General function

history record
hot key
Right click menu
Theme settings

Slide page editing

Page add, delete
Page order adjustment
Copy and paste pages
Background settings (solid color, gradient, picture)
Gridlines

Slide element editing

Element addition, deletion
Element copy and paste
Drag and move elements
Element rotation
Element zoom
Multiple selection of elements (frame selection, click selection)
Multi-element combination
Element lock
Snap and align elements (move and zoom)
Element level adjustment
Align elements to the canvas
Align elements to other elements
Drag and drop to add graphics
Paste external picture
Element coordinates, size and rotation angle settings

Text

Rich text editing (color, highlight, font, font size, bold, italic, underline, strikethrough, corner mark, inline code, quotation, alignment, bullets, clear format)
Row height
Word spacing
Fill color
frame
shadow
transparency

image

Cropping (custom, by shape, by aspect ratio)
Filter
Flip
frame
shadow
Replace picture
Reset picture
Set as background image

shape

Fill color
frame
shadow
transparency
Flip

line

colour
width
style
End style

Charts (bar chart, line chart, pie chart)

Data editing
Background fill
Theme color
Coordinate system and coordinate text color
Other settings (bar chart to bar chart, line chart to area chart, line chart to scatter chart, pie chart to ring chart, line chart to switch smooth curve)
frame

form

Add and delete rows and columns
Set the number of rows and columns
Theme settings (theme color, header, summary row, first column, last column)
Merge Cells
Cell style (fill color, text color, bold, italic, underline, strikethrough, alignment)
frame

Slideshow

Page turning animation
Element admission animation
All slide preview
Brush tool

💡 common problem

Q. Why doesn’t the xxx shortcut key work?

A. Some shortcut keys need to be focused on the designated area to take effect. For example, the focus is on the thumbnail list on the left to use the shortcut keys of the operation page, and the focus is on the canvas area to use the shortcut keys of the operation element.

Q. Why doesn’t paste work?

A. Please pay attention to allow the browser to access the system clipboard.

Q. After the browser is refreshed or reopened, why is there no PPT made before?

A. The demo project is purely front-end deployment and no data will be saved.

Q. How to adjust the order of slide pages?

A. Press and hold the thumbnail on the left to drag to adjust the order.

Q. Why does the operation freeze after inserting a picture?

A. Since this demo project does not rely on the backend, the actual reference to the inserted local image is Base64, which results in a very large data volume. In a real production environment, the image address should be quoted after uploading the image. This will not happen.

Q. Why is there no effect after applying the preset theme?

A. The function of setting a preset theme is to apply the theme style to the newly added elements and pages, which will not take effect on the existing elements and pages (except font colors). You can use the “Apply Theme to All” function to change the current theme Apply to all current pages.